تمامی عناصر HTML را می توان به صورت یک چهار ضلعی یا جعبه (Box) در نظر گرفت.
مفهوم Box Model در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیات Padding و Border و Margin و Content است.
می توانید در طرح زیر، مفهوم Box Model را دقیقتر درک کنید:
توضیح قسمتهای مختلف مدل Box
- Margin: فضای خالی در خارج از محیط Box و مرز Border، که می توان اندازه آن را برای ضلع های مختلف (بالا، راست، پایین و چپ) به صورت کلی و یا جزء به جزء تعیین نمود . این فضا دارای رنگ پس زمینه نیست وبه صورت یک فضا با پس زمینه شفاف یا Transparent در فضای اطراف Box قرار می گیرد.
- Border: مشخص کننده مرز خارجی Box یعنی خارج از محتوا و Padding است که می توان میزان ضخامت و رنگ و نوع آن را تعیین نمود. به صورت پیش فرض رنگ آن از رنگ زمینه Box پیروی می کند.
- Padding: فضای خالیِ مابین محتوا و Border است که می توان اندازه آن را برای ضلع های مختلف (بالا، راست، پایین و چپ) به صورت کلی و یا جزء به جزء تعیین نمود . رنگ پس زمینه این فضا از رنگ پس زمینه Box پیروی می کند.
- Content: محتویات داخلی یک Box، که می تواند شامل متن، تصویر، لیست و یا جدول و … باشد.
- به عنوان مثال در ذیل آمده است.
<html>
<head>
<style type="text/css">div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}</style>
</head>
<body>
<img src="250px.gif" width="250" height="1"/><br/><br/>
<div class="ex">The line above is 250px wide.<br/>
The total width of this element is also 250px.</div>
<p><b>Important:</b> This example will not display correctly in IE8 and earlier
versions!<br/>
However, we will solve that problem in the next example.</p>
</body>
</html>
مثال بالا در IE8 و نسخه های قبل از آن بطور صحیح نمایش داده نمی شود.
در واقع در IE8 و نسخه های قبلی آن Padding و Border عنصر مورد نظر، در عرضی که عنصر اشغال می کند، دخالت داده می شوند.
برای حل شدن این مشکل فقط کافی است که یک DOCTYPE به صفحه HTML اضافه شود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}</style>
</head>
<body>
<img src="250px.gif" width="250" height="1"/><br/><br/>
<div class="ex">The line above is 250px wide.<br/>
Now the total width of this element is also 250px.</div>
<p><b>Note:</b> In this example we have added a DOCTYPE declaration (above the html element), so it displays correctly in all browsers.</p>
</body>
</html>
کامنت جدید ...