DIV盒子模型:
從外到內依次包括:
margin:外邊距、
border:邊框、
padding:內補白、
content:內容。
內外距離區別:
padding就是內容與邊框的空隙。
margin 則是模塊與模塊的空隙。
圖解:
以下是W3C標準的盒子示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background:yellow;
border:2px solid red;
padding:10px 20px 30px 40px; /*上、右、下、左 順序*/
}
#div1{
width:300px;
height:300px;
background:#c09;
border:2px solid yellow;
margin:10px 20px 30px 40px; /*上、右、下、左 順序*/
}
</style>
</head>
<body>
<!--div的實際寬度爲:div寬度+padding寬度*2+border寬度*2+margin寬度*2-->
<div class="div1">DIV內補白padding,距離邊框的空隙。會撐開盒子。</div>
<div id="div1">DIV外部邊距margin,距離外部元素的空隙(外邊距)。</div>
</body>
</html>