内边距的百分比数值
百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。
下面这条规则把段落的内边距设置为父元素 width 的 10%:
p {padding: 10%;}
例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算:
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>
注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度
边框样式
如果希望显示某种边框,就必须设置边框样式,比如 solid 或 outset。
如果把 border-style 设置为 none,即使自己设置了边框的宽高属性,也会自动变为0
由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果希望边框出现,就必须声明一个边框样式。
值复制
有时,我们会输入一些重复的值:
p {margin: 0.5em 1em 0.5em 1em;}
通过值复制,您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的:
p {margin: 0.5em 1em;}
这两个值可以取代前面 4 个值。这是如何做到的呢?CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:
- 如果缺少左外边距的值,则使用右外边距的值。
- 如果缺少下外边距的值,则使用上外边距的值。
- 如果缺少右外边距的值,则使用上外边距的值。
下图提供了更直观的方法来了解这一点:
换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。
例如:
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
- 要使文字在盒子中垂直居中,可以设置文字的line-height值与盒子高度相等