CSS框模型_内边距&边框&外边距

CSS框模型

以元素框(border)为界，元素框内包含内边距(padding)、元素内容(element)。元素框外为外边距(margin)。

外边距默认是透明的，因此不会遮挡其后的任何元素。

背景应用于由内容和内边距、边框组成的区域，即：不包含外边距。

内边距、边框和外边距都是可选的，默认值是零。

根据W3C的规范，元素内容占据的空间是由width、height属性设置的，而内容周围的padding、border、margin值是另外计算的。

内边距 [padding]

padding属性接受长度值或百分比值，不允许使用负值。百分数值是相对于其父元素的width计算的。

内边距还包含各个单独的设置：

padding-top

,

padding-right

,

padding-bottom

,

padding-left

。

您还可以按照上、右、下、左的顺序分别设置各边的内边距，如：

h1 {padding: 10px 0.25em 2ex 20%;}

如果指定了3个值，则数值依次表示上内边距、左右内边距、下内边距，如：

h1 {padding: 10px 5px 15px;}

表示上内边距为10px，左右内边距为5px，下内边距为15px。

如果指定了2个值，则数值依次表示上下内边距、左右内边距，如：

td {padding: 0.5cm 2.5cm}

表示单元格的上和下内边距为0.5cm，左和右内边距为2.5cm。

如果指定了1个值，则上下左右内边距一致，如：

td {padding: 10px}

表示单元格的上下左右内边距都是10px。

总结如下：
如果缺少右值，则使用上值。

如果缺少下值，则使用上值。

如果缺少左值，则使用右值。

边框 [border]

每个边框有3个方面：样式、宽度、颜色。

有了样式后，才能有宽度、颜色。

p
{
border: solid medium rgb(250,0,255)
}

边框样式 [border-style]

h、p等标签的默认边框样式为none，所以不显示，如果要显示，需要显式声明。

边框样式包含单独设置:

border-top-style

，

border-right-style

，

border-bottom-style

，

border-left-style

。

p.soliddouble { border-style: solid double }        <!-- 上下border为solid, 左右border为double -->
p.three       { border-style: solid double groove } <!-- 上border为solid，左右border为double，下border为groove -->

边框宽度 [border-width]

注意：只有边框存在，才可设置边框宽度

边框宽度包含单独设置：

border-top-width

,

border-right-width

,

border-bottom-width

,

border-left-width

。

p.one
{
border-style: solid; <!-- Note: 声明一个样式后再设置宽度!!! -->
border-width: 5px 10px 1px medium;
}
p.two
{
border-style: solid;
border-width: 5px 10px;
}

边框颜色 [border-color]

注意：只有边框存在，才可设置边框颜色

边框颜色包含单独设置：

border-top-color

,

border-right-color

,

border-bottom-color

,

border-left-color

。

边框颜色支持设置为透明(transparent)，这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}

外边距 [margin]

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

浏览器对许多元素提供了预定的样式，外边距也不例外。如：外边距会在每个段落元素的上面和下面生成“空行”。

外边距包含单独设置：

margin-top

,

margin-right

,

margin-bottom

,

margin-left

。

p.margin { margin: 2cm 4cm 3cm 4cm }

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

一般发生下面3种情况的合并：
1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

2.一个元素包含在另一个元素中时(并且没有内边距或边框把外边距分隔开)，它们的上或下外边距会发生合并。

3.假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距会发生合并。

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

更多请参考：W3School