将HTML元素看作盒子,并分为以下部分:
- 边距(Margin):表示盒子外面的空白区域,默认是透明的。margin是元素与浏览器窗口或者与另一个元素之间的空白。
- 边框(Border):可以设置它的粗细、样式和颜色。
- 填充(Padding):元素内容与边框的距离。
- 实际内容(Content)
以上四部分均可单独针对上、右、下、左进行样式设置,如下:
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
注意,如果将左右margin同时设置为auto时,则表示左右根据宽度自适应相同值。
CSS样式中的width属性和height属性指定的是实际内容(content)部分的宽度。一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。高度同理。