CSS中块状结构类似于盒子模型，如下图：
从左至又分别是外边距，边框，内边距，内容，下面我们来分别测试这几个属性。
我先做一个没有任何修饰的盒子模型：
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.text {
width: 400px;
height: 400px;
display: block;
border: solid 2px blue;
}
</style>
<title>盒子模型</title>
</head>
<body>
<div class="text"> 盒子模型测试<br />
盒子模型测试<br />
盒子模型测试<br />
盒子模型测试<br />
盒子模型测试<br />
盒子模型测试<br />
盒子模型测试<br />
盒子模型测试<br />
</div>
</body>
</html>
显示效果如图：
首先我加内边距：padding:100px 0px 50px 100px;
可以看到里面的文字向中靠拢，同时盒子也变大了，如下图：
再设置外边距：marign:100px 150px;
这时，可以看到网页中显示的仍然是上图，没有变化，
但我们这时如果再加如一段文字，
<div >
这是一段文字；
</div>
就会显示如下所示的样式：
可见，这段文字与盒子间有一段距离，这就是外边距了。
最后我们测试一个行高属性：line-height:50px;
效果：
可见，行高并不会影响盒子的宽度！
扫一扫
5097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
