CSS 中的边距，边框和填充距－站长资讯网info110.com

示例1

在文本样式化一文中，F. Scott Fitzgerald 作品的开头部分的排版是由CSS做成的。本文中的示例用的是同一篇文章，只是对这片文章做了些小改动（主要是在正文周围加上一个容器元素）。没有对其文本式样作改动，只是去掉了该示例中用到的一些布局样式。

首先，我们将边距加到所有需要边距的元素上。

链接:

只做了最低程度的样式化处理的示例文件
初始样式表
body，标题，格言引用，文件容器和段落上的新边距
示例1的样式表

新规则:

body { margin: 0; }
  #main { margin: 0 auto 0 auto; }
  h1 { margin: 0 0 1em 0; }
  .pullQuote { margin: auto 0 1em 1em; }
  p { margin: 0; }
  .attribution { margin: 0 0 1.5em 0; }

给对象添加边框：边框属性

border 缩写属性有是有的, 但是只有在给一个元素四边都加上完整一致的边框时才能用到它。通过下列属性的任意有意义的组合,可以给一个元素的四个边框之一设置粗细（宽度）、样式和颜色：

border-width
border-style
border-color
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color

border-width 属性

这些属性的作用与人们所预期的一致：它们给一个或多个边框指定明确的粗细.

border-width 缩写属性可支持的属性值表示法与 margin 缩写属性的一样，只是不支持百分比值。你可以像下面这样写规则：

td {
	border-width: 1px 0 0 1px;
}

border-style 属性

eight different values for border style in CSS

图 4：八个常见的边框样式的运行效果。

border-style 属性通常接受下列这些值：

dashed: 虚线的长度，及它们之间的空白的大小视浏览器而定.
dotted: 点（形状不定，长宽比为 1）与点之间的空白的大小视浏览器而定。
double: 设置的宽度将分成三段，按照填充－不填充－填充的顺序渲染。
groove: 会紧贴在边框内部渲染出 outset，并inset对齐。
inset: 边框会带有阴影效果，看起来像是把应用了该样式的元素压进了画布。
none: 相当于对 -width 属性赋零值。
outset: 边框会带有阴影效果，看起来像是把应用了该样式的元素挤压出容器之中。
ridge: 会紧贴在边框内部渲染出 inset，并与 outset 对齐。
solid: 边框表现为一条没有断点也没有阴影的线。

应用border-style 缩写属性时，一次至多可写四个值，其形式与 margin 缩写形式一样。

边框的淡化（而不是省略边框）处理是由 -color 属性进行的。

border-color 属性

最后，我们可以对任何一个边框设置任意颜色，这种操作可以通过单独对上面所列出的属性进行设置来完成，也可以通过 border-color 缩写属性来完成。对于在缩写属性中给出的值少于四个时会产生的效果，详见 margin 缩写属性说明。

像 background-color 一样，border-color 可以取 transparent。这一点在对付要求组合一致但不要求边框使用一致的边缘情况时会很有用。

详述边框缩写属性和它的四个近亲

和各种 -width、-style 和 -color 属性不同，你可以用这五个属性来定义某个对象的四侧边框的三个特征，或每次定义任一边框的三个特征。合法的 border（等等）缩写值包含所有或任一应用于此边框的宽度，样式和颜色属性；唯一的限制是你必须要么一次只提交某个元素的一侧边框，要么四侧边框全部提交。

看看下列 border 规则:

#borderShorthandExample {
	border: 2px outset rgb(160,0,0);
	padding: .857em;
	background-color: rgb(255,224,224);
}

应用了上面规则的元素会产生与此处相同的效果。

如果在 border 缩写规则中省略某个值时，渲染出来的元素就会表现出对应的默认效果；

边框宽度视浏览器而定。
边框样式将是 solid。
边框颜色将与该元素所应用的 color一致。

创建线条: 五个… 而不是一个边框缩写属性的基本原理

这里所说的“rules”是指划过某个布局的线条，而不是要遵从的指令。这样的线条可以增强一个元素与它旁边的空白的对比度，在许多情况下，它们有助于制作一个布局中的立体感效果。inset 和 outset 边框样式就是这种效果的例子。

对一个元素的四边都加上边框可以得到相同的效果，而这种在布局上划出精确界定的线条的技能可以使设计者对细节有相当大的控制权。

.
分页: [1] [2] [3] [4] [5] [6]

上一篇:用不同的 CSS 怎样定位不同的浏览器
下一篇:CSS选择符

TAG: CSS 边距边框填充距

搜索