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

最新推荐文章于 2022-03-25 20:51:01 发布

时间解

最新推荐文章于 2022-03-25 20:51:01 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： css border padding margin

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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)
}