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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

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

مثال

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

1 h1 {
2   margin: 0 0 50px 0;
3 }
4 
5 h2 {
6   margin: 20px 0 0 0;
7 }


در مثال بالا، عنصر <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) را تنظیم می‌کند


منابع آموزشی