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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

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

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

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

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

مثال

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

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) را تنظیم می‌کند


منابع آموزشی