DIV盒子模型
程序员文章站
2024-01-17 14:39:58
...
DIV盒子模型：
从外到内依次包括：
margin：外边距、
border：边框、
padding：内补白、
content：内容。
内外距离区别：
其实说白了
padding就是内容与边框的空隙。
margin 则是模块与模块的空隙。
图解：
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>