我的书签
添加书签
移除书签12.6 外边距与内边距属性
使用外边距属性可以设置元素周围的边界宽度，包括上、下、左、右4个边界的距离。内边距属性用于设置边框和元素内容之间的间距，同样包括上、下、左、右4个方向的边距值。它们的设置值都是一样的，都为数值，单位可以是长度单位，也可以是百分比单位。
在网页布局中，为了能够在纷繁复杂的各个部分合理地进行组织，这个领域的一些有识之士对它的本质进行充分研究后，总结了一套完整的、行之有效的原则和规范。这就是“盒子模型”的由来。
所有页面中的元素都可以看成一个盒子，占据着一定的页面空间一般来说这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。如图12.30所示，在CSS中一个独立的盒子模型由Content（内容）、padding（内边距）、border（边框）和margin（外边距）4部分组成。
图12.30 盒子模型
1．内容区
内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。内容区有三个属性width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，其值可以是长度值或百分比值。
2．内边距
内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。内边距的属性有五种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上四种方向的快捷内边距属性padding。使用这五种属性可以指定内容区与各方向边框间的距离。同时通过对盒子背景色属性的设置可以使内边距部分呈现相应的颜色，起到一定的变现效果。
3．边框
边框的属性有border-style、border-width和border-color以及综合了以上三类属性的快捷边框属性border。
4．外边距
外边距位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。外边距使元素盒子之间不必紧凑地连接在一起，是CSS布局的一个重要手段。外边距的属性有五种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上四种方向的快捷外边距属性margin，其具体的设置和使用与内边距属性类似。
12.6.1 上边距margin-top
上边距也叫顶端边距，使用上边距可以设置元素的上边界，可以使用长度值或百分比。
语法：
说明：
margin-top取值范围包括如下：
长度值相当于设置顶端的绝对边距值，包括数字和单位；
百分比是设置相对于上级元素的宽度的百分比，允许使用负值；
auto是自动取边距值，即元素的默认值。
举例：
在代码中加粗部分的标记用来设置图像的顶端边距margin-top，将顶端边距设置为30pt，在浏览器中预览效果，如图12.31所示。
图12.31 顶端边距效果
12.6.2 其他边距margin-bottom、margin-left、margin-right
底边边距用于设置元素下方的边距值；左侧边距和右侧边距则分别用于设置元素左右两侧的边距值。其语法和用法与顶端边距类似，下面用一个例子来看底边边距、左侧边距和右侧边距的效果。
举例：
在代码中加粗部分的标记用来设置上边距、底边边距、左侧边距和右侧边距，将上边距设置为20pt，右侧边距设置为50px，底边边距设置为10px，左侧边距设置为50px，在浏览器中预览效果，如图12.32所示。
图12.32 底边边距、左侧边距和右侧边距效果
12.6.3 外边距复合属性margin
外边距的复合属性为对4个边距设置的略写。
语法：
说明：
margin的值可以取1到4个，如果只设置1个值，则应用于所有的4个边界；如果设置2个或3个值，则省略的值与对边相等；如果设置4个值，则按照上、下、左、右的顺序分别对应其边距。
举例：
在代码中加粗部分的标记用来设置图像边距的复合属性，上、下、左、右边距分别为10pt、30px、10px、20px，在浏览器中预览效果，如图12.33所示。
图12.33 边距复合属性效果
12.6.4 顶端内边距padding-top
顶端内边距属性padding-top用于设置上边框和选择内容之间的间隔。
语法：
说明：
间隔值可以设置为长度值或百分比。其中，百分比不能使用负数。
举例：
在代码中加粗部分的标记用来设置顶端填充，将顶端填充设置为40px，在浏览器中预览效果，如图12.34所示。
图12.34 顶端内边距效果
12.6.5 其他内边距padding-bottom、padding-right、padding-left
其他内边距属性分别用于设置底端、左、右两侧的间隔，其语法和用法与顶端内边距类似，下面用一个例子来看其他内边距的效果。
举例：
在代码中加粗部分的标记用来设置其他内边距，将顶端内边距设置为15px，右侧内边距设置为35px，底端内边距设置为20px，左侧内边距设置为5px，在浏览器中预览效果，如图12.35所示。
图12.35 其他内边距效果
12.6.6 内边距复合属性padding
也可以使用内边距合属性略写CSS代码，下面用一个例子来看内边距复合属性的效果。
语法：
举例：
在代码中加粗部分的标记用来设置内边距复合属性，在浏览器中预览效果，如图12.36所示。
图12.36 内边距复合属性效果
如图12.37所示使用内外边距属性定义的网页布局。
图12.37 使用内外边距属性定义的网页布局
