در این بخش از آموزش طراحی صفحات وب به آموزش Margin در CSS می پردازیم. در حقیقت با استفاده از این پراپرتی می خواهیم فاصله عناصر HTML را با دیگر عناصر HTML صفحه مشخص کنیم.
عنصر بالا یک مقدار margin به اندازه 70 پیکسل دارد.
مشخصه margin برای به وجود آوردن فضای خارجی اطراف عنصرهای HTML می باشد. به عبارتی margin باعث می شود تا بین عنصر و اطرافش فاصله ای ایجاد گردد. به عنوان مثال اگر نیاز داشته باشیم تا لبه سمت راست عنصر HTML با هرآنچه که در سمت راست آن عنصر قرار دارد به اندازه 100 پیکسل فاصله داشته باشد، از مشخصه margin استفاده می کنیم.
مشخصه های margin به شکل زیر هستند و شما با استفاده از هر کدام این مشخصه ها می توانید برای هر لبه عنصر HTML به صورت مستقل فاصله ای را با دیگر عناصر اطرافش در نظر بگیرید.
- margin-top
- margin-right
- margin-bottom
- margin-left
مشخصه های margin می توانند مقادیر زیر را داشته باشند:
- auto - مرورگر فضای خالی اطراف عنصر HTML را به صورت خودکار حساب می کند. معمولا از این مقدار برای این که عنصری را در مرکز قرار بدهیم استفاده می کنیم.
- length - یک اندازه ثابت با استفاده از واحدهای اندازه گیری مطلق px, pt, cm … برای عنصر درنظر گرفته می شود.
- % - زمانی که از این واحد نسبی استفاده کنیم، مرورگر مقدار فاصله را نسبت به عرض عنصر والد (parent) تعیین می کند.
- inherit - استفاده از کلمه کلیدی inherit باعث می شود که مقدار مشخصه margin برابر با مقدار مشخصه margin عنصر پدر گردد.
نکته: مشخصه margin مقادیر منفی هم می پذیرد که استفاده از آن زیاد توصیه نمی گردد. مثال زیر نحوه استفاده از مشخصه margin را نمایش می دهد.
خروجی مثال بالا به شکل زیر است:
خلاصه نویسی پراپرتی Margin
برای کوتاه کردن کد می توانید تمام مشخصه های Margin را در یک مشخصه قرار دهید. در این حالت زمانی که 4 مقدار برای این مشخصه استفاده می کنیم. اولین مقدار فاصله لبه بالا، دومین مقدار فاصله لبه راست، سومین مقدار فاصله لبه پایین و چهارمین مقدار فاصله لبه چپ عنصر را مشخص می کنند. ترتیب این مقادیر در جهت عقربه های ساعت می باشد.
مثال:
خروجی مثال بالا به شکل زیر است:
استفاده از 3 مقدار:
در این حالت اولین مقدار فاصله لبه بالا، دومین مقدار فاصله لبه راست و چپ و سومین مقدار فاصله لبه پایین عنصر را مشخص می کند.
خروجی مثال بالا به شکل زیر است:
استفاده از 2 مقدار:
در این حالت اولین مقدار برای لبه های بالا و پایین و دومین مقدار برای لبه های راست و چپ استفاده می شود.
خروجی مثال بالا به شکل زیر است:
استفاده از حالت تک مقداری: در این حالت مقدار در نظر گرفته شده برای تمام لبه های عنصر اعمال می شود.
خروجی مثال بالا به شکل زیر است:
مقدار auto
شما می توانید مشخصه ی Margin را روی auto قرار دهید تا عنصر را بصورت افقی در وسط عنصر نگهدارنده خود قرار دهید.
خروجی مثال بالا به شکل زیر است:
مقدار inherit
استفاده از مقدار inherit باعث می شود که مقدار مشخصه margin برابر با مقدار مشخصه margin عنصر پدر گردد.
خروجی مثال بالا به شکل زیر است:
خاصیت Margin Collapse
در زبان CSS یک اصطلاح وجود داد که به آن margin collapsing گفته می شود.Margin Collapse معمولا زمانی اتفاق می افتد که می خواهیم دو عنصر که زیر هم قرار دارند را توسط مشخصه margin از هم دور کنیم.
برای این کار شاید به margin-bottom عنصر بالا و به margin-top عنصر پایین مقادیری اختصاص دهیم. فرض کنید به عنصر اول مقدار 50 پیکسل و به عنصر دوم مقدار 20 پیکسل می دهیم. حال باید فاصله بین این دو عنصر در راستای عمود برابر با 70 پیکسل باشد. اما این اتفاق نمی افتد و اتفاقی که می افتد این است که فاصله بین این دو عنصر تنها بزرگترین مقدار مشخصه margin بین این دو عنصر خواهد بود. یعنی در مثال ما فاصله برابر با 50 پیکسل خواهد بود. در تصویر زیر فاصله خارجی برای عنصر بالا مشخص شده است و همانطور که مشاهده می کنید، بین دو عنصر فقط مقدار فاصله تعیین شده توسط عنصر بالا عامل جدایی بین دو عنصر است و در واقع فاصله خارجی عنصر پایین collapse شده است.
نکته: این اتفاق روی حاشیه های چپ و راست اتفاق نمی افتد!
به مثال زیر توجه کنید:
خروجی مثال بالا به شکل زیر است:
در مثال بالا، عنصر <h1> یک حاشیه ی پایین به اندازه ی 50 پیکسل و عنصر <h2> یک حاشیه ی بالا به اندازه ی 20 پیکسل دارد. اگر بخواهیم بصورت منطقی عمل کنیم حاشیه ی عمودی بین <h1> و <h2> باید جمعشان 70 پیکسل باشد. اما بر اساس margin collapse، حاشیه واقعی 50 خواهد بود.
