در طراحی و چیدمان صفحات وب، اصطلاح «مدل جعبهای» (Box Model) در CSS به ساختاری اشاره دارد که دور هر عنصر HTML قرار میگیرد.
مدل جعبهای در CSS در واقع یک جعبه است که هر عنصر HTML را در بر میگیرد.
هر جعبه از چهار بخش تشکیل شده است:
محتوا (Content) — ناحیهای که متن و تصاویر در آن نمایش داده میشوند
فاصله داخلی (Padding) — فضای شفاف اطراف محتوا
مرز (Border) — خطی که دور محتوا و فاصله داخلی کشیده میشود
فاصله بیرونی (Margin) — فضای شفاف خارج از مرز عنصر
این مدل به ما اجازه میدهد تا برای عناصر مرز تعریف کنیم و فضای بین آنها را مشخص نماییم.
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
در این مثال، عنصر <div> دارای عرض ۳۰۰ پیکسل، مرز سبز به ضخامت ۱۵ پیکسل، فاصله داخلی ۵۰ پیکسل و فاصله بیرونی ۲۰ پیکسل است.
برای اینکه بتوانید عرض و ارتفاع عناصر را بهدرستی در همه مرورگرها تنظیم کنید، باید با نحوه عملکرد مدل جعبهای آشنا باشید.
نکته مهم: زمانی که با CSS ویژگیهای
widthوheightرا تنظیم میکنید، فقط ناحیه محتوای عنصر را مشخص میکنید. برای محاسبهی اندازه واقعی عنصر، باید فاصله داخلی (padding) و مرز (border) را نیز در نظر بگیرید.
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
۳۲۰ پیکسل (عرض ناحیه محتوا)
۲۰ پیکسل (۱۰ پیکسل padding سمت چپ + ۱۰ پیکسل padding سمت راست)
۱۰ پیکسل (۵ پیکسل border سمت چپ + ۵ پیکسل border سمت راست) = ۳۵۰ پیکسل (عرض کل عنصر)
۵۰ پیکسل (ارتفاع ناحیه محتوا)
۲۰ پیکسل (۱۰ پیکسل padding بالا + ۱۰ پیکسل padding پایین)
۱۰ پیکسل (۵ پیکسل border بالا + ۵ پیکسل border پایین) = ۸۰ پیکسل (ارتفاع کل عنصر)
عرض کل عنصر = width + padding-left + padding-right + border-left + border-right
ارتفاع کل عنصر = height + padding-top + padding-bottom + border-top + border-bottom
توجه: ویژگی
marginنیز بر فضای کلیای که عنصر در صفحه اشغال میکند تأثیر دارد، اما در محاسبه اندازه واقعی جعبه لحاظ نمیشود. اندازه واقعی عنصر تا انتهای مرز (border) محاسبه میشود.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses