شکسته‌شدن حاشیه

« صفحهٔ قبل

صفحهٔ بعد »

شکسته شدن حاشیه

گاهی اوقات حاشیه های بالا و پایین به یک مقدار حاشیه، که برابر بزگترین مقدار بین آن دو است، شکسته می‌شوند.

این اتفاق در حاشیه‌های چپ و راست رخ نمی‌دهد! فقط حاشیه‌های بالا و پایین!

نگاهی به مثال زیر بی‌اندازید:

مثال

نمایش شکستن حاشیه:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

مشاهدهٔ نتیجه

در مثال بالا، عنصر <h1> یک حاشیه پایین برابر با ۵۰ پیکسل دارد و عنصر <h2> یک حاشیه بالا به اندازه ۲۰ پیکسل دارد.

بطور معقول بنظر می رسد که حاشیه (margin) عمودی ببین عنصر <h1> و <h2> مجموعاً (50px + 20px) 70px خواهد بود. اما با توجه به شکست، در نهایت حاشیه واقعی ۵۰ پیکسل است.

تمامی ویژگی‌های Margin در CSS

ویژگی	توضیحات
margin	یک ویژگی مختصر برای تنظیم ویژگی‌های حاشیه در یک اعلان است
margin-bottom	حاشیه پایین (bottom margin) را تنظیم می‌کند
margin-left	حاشیه از چپ (left margin) را تنظیم می‌کند
margin-right	حاشیه از راست (right margin) را تنظیم می‌کند
margin-top	حاشیه بالا (top margin) را تنظیم می‌کند

« صفحهٔ قبل

صفحهٔ بعد »