[html5]CSS盒子模型的介绍与说明

CSS盒子模型是一个围绕HTML元素——并且HTML元素定义了边框border，内边距padding和外边距margin 的矩形空间。

• Border:——定义了包含元素的最大面积。边框可以可见，也可以不可见，可以定义它的高度和宽度等。
• Padding:——定义边框和元素之间的间距。
• Margin:——定义边框和任何相邻元素之间的间距。

例如下面就是一段简单的定义了box边框，外边距和内边距值的CSS代码。

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

现在，如果我们应用上述CSS代码到DIV标记，如下所示，那么你的输出将会如下图所示。我创建了两个文本，“Some text”和“Some other text”，这样我们可以看到margin属性函数是怎么样的。

<div align="middle" class="box">
Some text
</div>

Some other text