تفاوت دو تگ مارجین و پدینگ و آموزش کامل هر دو

در ادامه مباحث آموزش مقدماتی css این بار می خواهیم به مبحث کار با ویژگی های padding و margin بپردازیم، با ذکر این مقدمه که استفاده از ویژگی های مذکور در فرم دهی، اسکلت بندی چارچوب کار و طراحی صفحات و قالب های وب، امری فراگیر و تقریبا اجتناب ناپذیر است، به طور مثال برای تنظیم موقعیت بلاک ها، فاصله لایه ها از هم ، نمایش سفارشی محتوای درون لایه ها، جداول و خیلی چیزهای دیگر، از padding و margin و تنظیمات زیر مجموعه آنها استفاده می شود که در ادامه آموزش، به تفصیل راجب آن خواهیم گفت.

ویژگی margin در css
همانطور که از عنوان این عبارت مشخص است، ویژگی margin برای تنظیم فاصله ی حاشیه ها استفاده می شود، به فرض اگر بخواهیم بلاک div اصلی صفحه، از کناره ها و در واقع از تگ body به میزان چند پیکسل فاصله داشته باشد، کافی است برای آن بلاک، مقادیر حاشیه را در قسمت بالا (top)، به میزان مشخصی در یک کلاس (class) یا آی دی (id) تعریف کنیم، به طور مثال:

.main-block{
    margin-top:4px;
    display:block;    
}

به این صورت، بلاک div با کلاس فرضی main-block از تگ body و در واقع از حاشیه های صفحه نمایش، به میزان 4 پیکسل فاصله می گیرد.
مقادیر مربوط به اندازه حاشیه را می توان به چند صورت زیر تعیین کرد، اما مناسب ترین و متداول ترین شیوه در حالت معمول، تعیین مقادیر به پیکسل (px) است.
- تعیین مقادیر به پیکسل (picture element)، به فرض 4px، 0px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 2pt، 6pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.
نحوه تعریف ویژگی margin

ویژگی margin را می توان به دو صورت عادی و مختصر تعریف کرد، در شیوه عادی برای کل جهت های بالا، پائین، چپ و راست به صورت یکجا یا جداگانه، margin تعریف می شود، به طور مثال:

.main-block{
    margin:auto;
}

مثال بالا به این معنی است که مرورگر مقادیر پیش فرض حاشیه را برای جهت های بالا، پائین، چپ و راست در نظر می گیرد.
و یا:

.main-block{
    margin-bottom:4px;
    margin-left:2px;
    margin-right:2px;
    margin-top:4px;
}

و یا:

.main-block{
    margin-left:50%;
    margin-right:30em;
    margin-bottom:20pt;
    margin-top:inherit;
}

و همچنین:

.main-block{
    margin-right:auto;
    margin-left:auto;
}

اما در حالت مختصر نویسی، به جای نوشتن مقادیر و جهت های بالا، پائین، چپ و راست، با نوشتن مقادیر آنها در یک خط، به همان هدف اما با کدنویسی کمتر می رسیم، به فرض:

.main-block{
    margin:10px 15px 20px 25px;
}

اعداد در کلاس فوق، به ترتیب نشانگر جهت بالا (top) راست (right) پائین (bottom) و چپ (left) هستند، در واقع مثال برابر است با کد css زیر:

.main-block{
    margin-top:10px;
    margin-right:15px;
    margin-bottom:20px;
    margin-left:25px;
}

و همین طور مختصر نویسی به صورت زیر:

.main-block{
    margin:10px 15px 20px;
}

برابر است با این کلاس css:

.main-block{
    margin-top:10px;
    margin-right:15px;
    margin-bottom:20px;
}

و همچنین:

.main-block{
    margin:10px 15px;
}

برابر است با:

.main-block{
    margin-top:10px;
    margin-right:15px;
}

ویژگی padding در css

بر عکس ویژگی margin که فاصله دو بلاک یا دو لایه را در صفحات وب تعیین می کند، ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بلاک را مشخص می کند، به فرض اگر بخواهیم مطالب داخلی یک لایه به میزان 4 پیکسل از کناره های آن فاصله داشته باشد، کافیست برای استایل یا کلاس مربوط به آن لایه، یک مقدار padding در نظر بگیریم، به طور مثال:

.main-block{
    padding:4px;
}

آنچه در مورد ویژگی margin گفتیم، تا حدود زیادی در مورد padding نیز قابل اعمال است، به طور مثال برای تعریف مقادیر جهت های بالا، پائین، چپ و راست به صورت زیر، padding را مقدار می دهیم:

.main-block{
    padding-top:4px;
    padding-bottom:6px;
    padding-left:8px;
    padding-right:10px;
}

و در شیوه مختصر نویسی:

.main-block{
    padding:4px 10px 6px 8px;
}

همانطور که پیش تر گفتیم، اعداد در کلاس فوق، به ترتیب نشانگر جهت بالا (top) راست (right) پائین (bottom) و چپ (left) هستند.
مثال و پیش نمایش آنلاین

جهت بررسی و آشنایی بیشتر با ویژگی های padding و margin می توانید از کد زیر استفاده کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | حاشیه و نمایش محتوا در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    margin:0px;
    padding:0px;
    background-color:#333;
    color:#CCC;
}
.main-block{
    display:block;
    color:#666;
    background-color:#CCC;
    height:400px;
    width:400px;
    margin-top:100px;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:10px;
    padding:8px;
}
</style>
</head>
<body>
<div class="main-block">

بر عکس ویژگی margin که فاصله دو بلاک یا دو لایه را در صفحات وب تعیین می کند، ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بلاک را مشخص می کند.

</div>
<hr />
با تنظیم مقادیر margin-right و margin-left به صورت auto، بلاک div در وسط صفحه تنظیم می شود.
</body>
</html>