ورود

**saberi** · ۹۴/۶/۲۳، ۰۹:۵۰ عصر

کار با ویژگی margin و padding در css

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

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

به این صورت، بلاک 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 تعریف می شود، به طور مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

و یا:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و یا:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و همچنین:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و همچنین:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

برابر است با:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

ویژگی padding در css

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

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

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار