CSS模型教程:boxes,borderes,margins和padding

看看下列规则：

.narrowWaisted {
  width: 16.667em;
  margin: 1em auto 1em auto;
}

…class narrowWaisted 的块元素会将自身对齐到可用画布的中心。

…或可将某个适当元素的右边距设成某个相对较小的值，而左边距设为 auto 值。

设置完成后，这样的元素就会接近于右对齐。

负边距

所有边距属性都可以设为 negative。进行这种设置之后，就能以任意程度“抵消”相邻的边距。如果将一个足够大的负边距应用到一个足够大的元素上，受其影响的相邻元素甚至可以被重叠。

例如，看看下面简单的 div 元素（取自示例文件 negativemargin1.html。）

<div id="header"><h1>Lovely header</h1></div>
<div id="content"><p>Overlapping text is entirely unreadable</p></div>

如果用下面的CSS来样式化

body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}
#header { background-color:yellow }
h1 { color:red; font-size:2em; }

就会产生如图 2 所示的效果：

图2：这个简单示例中的两个元素。看起来很普通。

有意思的是下面这部分。现在我们要通过下面的规则给位于下边的元素的顶部添加一个相当大的负边距：

#content {margin-top:-3em;}

这样我们就会看到该元素上移了，重叠在标题上，如图3所示（实际例子参见negativemargins2.html 示例文件）。

图 3：应用了负边距之后，下边的元素上移并重叠在标题上。

合并边距

两个相似并相邻的块元素都有正边距时，两个边距中只有较大那个才会得以应用。如，试试下面的规则：

p {
  margin: 1em auto 1.5em auto;
}

如果按照字面含义对含有这种样式规则的文件进行渲染，连续的两个段落之间的最终边距应该是 2.5em ，即段落 1(1.5em)的底部边距与段落 2(1em)的顶部边距之和。但是，由于合并边距的应用，它们之间的边距只有 1.5em。

在块元素中列表和标题是特例，它们的边距不会与其它块元素的边距相合并。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!