CSS中盒子模型详解

  CSS中块状结构类似于盒子模型，如下图：

从左至又分别是外边距，边框，内边距，内容，下面我们来分别测试这几个属性。

我先做一个没有任何修饰的盒子模型：

代码如下：

盒子模型测试

  盒子模型测试

  盒子模型测试

  盒子模型测试

  盒子模型测试

  盒子模型测试

  盒子模型测试

  盒子模型测试

显示效果如图：

首先我加内边距：padding:100px 0px 50px 100px;

可以看到里面的文字向中靠拢，同时盒子也变大了，如下图：

再设置外边距：marign:100px 150px;

这时，可以看到网页中显示的仍然是上图，没有变化，

但我们这时如果再加如一段文字，

这是一段文字；

就会显示如下所示的样式：

可见，这段文字与盒子间有一段距离，这就是外边距了。

最后我们测试一个行高属性：line-height:50px;

效果：

可见，行高并不会影响盒子的宽度！