تمامی عناصر HTML می‌توانند به عنوان جعبه‌هایی در نظر گرفته شوند.
مدل جعبه‌ای CSS چیست؟
در CSS، اصطلاح “مدل جعبه‌ای” زمانی استفاده می‌شود که درباره طراحی و چیدمان عناصر صحبت می‌کنیم. مدل جعبه‌ای CSS شامل چهار بخش است: محتوا، پدینگ، حاشیه و مرز.
اجزای مدل جعبه‌ای:
- محتوا (Content): محتوای واقعی عنصر که متن و تصاویر را شامل می‌شود.
- پدینگ (Padding): فضایی شفاف که اطراف محتوا قرار می‌گیرد.
- مرز (Border): خطی که دور پدینگ و محتوا کشیده می‌شود.
- حاشیه (Margin): فضایی شفاف خارج از مرز که از دیگر عناصر فاصله ایجاد می‌کند.
مدل جعبه‌ای CSS به ما اجازه می‌دهد تا مرزی اطراف عناصر اضافه کرده و فضای بین عناصر مختلف را تعریف کنیم.
مثال:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}عرض و ارتفاع یک عنصر
برای تنظیم درست عرض و ارتفاع عناصر در همه مرورگرها، باید مدل جعبه‌ای را در نظر بگیرید. زمانی که خواص width و height را در CSS تنظیم می‌کنید، فقط برای ناحیه محتوای عنصر تنظیم می‌شوند.
برای محاسبه عرض و ارتفاع کلی یک عنصر، باید پدینگ و مرز را نیز در نظر بگیرید.
مثال:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}محاسبه عرض و ارتفاع کلی:
- عرض کل:
- 320px (عرض محتوا)
- 20px (پدینگ چپ و راست)
- 10px (مرز چپ و راست) = 350px (عرض کلی)
- ارتفاع کل:
- 50px (ارتفاع محتوا)
- 20px (پدینگ بالا و پایین)
- 10px (مرز بالا و پایین) = 80px (ارتفاع کلی)
نکته:
مقدار خاصیت margin نیز فضای کلی‌ای که جعبه اشغال می‌کند را تحت تأثیر قرار می‌دهد، اما در محاسبه اندازه واقعی جعبه لحاظ نمی‌شود. مرز نقطه‌ای است که اندازه جعبه پایان می‌یابد.
نکته:
مقدار خاصیت margin نیز فضای کلی‌ای که جعبه اشغال می‌کند را تحت تأثیر قرار می‌دهد، اما در محاسبه اندازه واقعی جعبه لحاظ نمی‌شود. مرز نقطه‌ای است که اندازه جعبه پایان می‌یابد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام