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

序言

乍看之下, CSS 布局模式简单明了。盒子，边框和边距都是相当简单的对象， CSS 语法对它们的特性描述并不复杂。

然而, 浏览器渲染引擎遵循着 CSS 2.1 推荐中所规定的一大堆规则，此外还有一些自己的规则。因此，对设计师而言，在将某个高级技巧添加到自己的技术集之前，需要先了解大量细节问题。

在本文中，我们将对那些控制 HTML 元素的布局的 CSS 属性进行介绍，这些 CSS 属性包括 HTML 元素的边框，边距和许多其它属性。本文所涵盖的范围还包括上面提到的一些规则。高级的栏式布局以及栅网聚焦技术将在后面的文章中讨论，这些文章将更加详细地对布局，浮动，清除，以及定位进行探讨。

变化的组合：CSS 中的边距，边框和填充距

在默认情况下，许多 HTML 元素如 div 元素和标题会渲染到占据浏览器画布的全部宽度，并且会强制实行末端断行，因此成串的这种元素的渲染效果在文档画布上会处于从上到下的堆叠中。

但是，HTML 元素和其通常的浏览器样式并不能满足开发员想达成的所有用途。把 CSS 与 HTML 合在一起用来“弥合差距”，从而 class 和 id 给标签添加语义，而样式表规则可以精确地改变布局和页面内容外观——甚至可能通过抵消掉浏览器默认样式的大部分效果来实现这一点。

对空白的细致控制是设计者最重要的工具之一——笔者认为它是重中之重。然而，尽管对空白的控制度能给网站设计带来高产品价值，但在默认的浏览器样式表中却缺乏这种控制，这就意味着设计师会频繁用到本文所说的边距,边框,填充距, 和其它 CSS 布局属性。

边距，边框和填充距的分布如图1所示。

图1：一个元素盒中各组成成分的详细图示，标有相关CSS属性。

在对象周围添加空白：margin-top、margin-right、margin-bottom、margin-left 及边距属性

边距可单独指定，也可在一条缩写规则中加以指定。另外缩写规则还可以对某个对象周围的各个边框进行控制。合法的值通常是用 px 或 em 单位指定的（像素或字体高）。而在 print-specific 样式表单中会相反用 in、cm 或 pt 单位（英寸、厘米或点）。

在所有情况下 %（百分比）值都是合法的，但须谨慎使用；此类值是按照父元素宽度的比例来计算的，漫不经心的赋值会造成意外的后果。这一问题将会在下面对 CSS 盒模型的讨论中加以详述。

除图像外所有内联元素都没有边距，因而无需边距值。关于这些元素的列表，请参阅下面的表2.

自动边距

依据不同的情况，auto 的赋值会指示浏览器按照自己样式表中

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