CSS基础：盒子模型、外边距和内边距

引言

现代HTML和层叠样式表(CSS)在Web开发方面的一个强大之处在于，您可以几乎完全将页面标记(HTML)与CSS中指定的渲染细节分离开来。一个使用少量标签和一些CSS样式的HTML页面可以看起来……嗯，几乎任何你想要的样子。您可以通过简单地更改CSS来改变它的外观。

CSS样式的一个基本但经常被误解的特性是所谓的盒子模型。盒子模型简单地定义了元素周围的矩形空间，并由三个属性定义

• border
• 填充
• 边距

您为这些CSS属性设置的宽度加起来就是HTML元素与其相邻元素之间的空间。下面是一个展示这三者的示例

边框代表元素本身的有效外部边界。边框可以是可见的，也可以是不可见的，并具有线型、颜色和宽度的属性。

内边距指定边框与HTML元素内任何内容之间的间距。如果没有可见边框，那么内边距的范围实际上就是元素的范围。与元素关联的任何背景CSS属性都显示在边框和内边距属性定义的区域内。

外边距代表边框外边缘与任何相邻元素之间的距离。这通常是造成混淆的原因，因为人们很容易将外边距视为元素之间的一种“内边距”。最好将其视为页面边距：它代表了对象的外部边缘。外边距实际上是透明的，不会反映为元素指定的任何背景属性。

CSS语法

让我们构建一个简单的例子，以便您可以看到CSS语法。下面是一个简单的容器div的HTML，其中包含一行文本

<div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

为了清晰起见，我们首先设置了body和“container”div的样式

body {background: black;}
#container {
    background: gray; 
    width: 600px; 
    margin: 0px auto; 
    border: 1px solid black;}

这里需要注意的重要一点是，页面背景是黑色的，容器div是灰色的。现在我们可以格式化容器内的p元素了

p { background: white;
    border: 20px solid red; 
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px; }

所以p元素边框内的任何内容都应该是白色的——我们将有一个好而粗的红色边框，这样你就不会错过了。看看它的样子

请注意，在此示例中，我们分别指定了顶部、底部、左侧和右侧的外边距和内边距值。这是指定这些值的一种方法，类似的border-top（等等）设置也可用于边框。这允许您清楚地设置您需要的任何或所有边框、外边距和内边距设置。例如，如果您只想指定顶部和右侧的外边距，这是完全可以接受的

margin-top: 30px;
margin-right: 8px;

但是，您也可以使用CSS简写语法来设置这些值。实际上，到目前为止我们对边框设置所做的就是这样

border: 20px solid red;

对于外边距和内边距，您可以使用此简写一次设置所有四个值

margin: 0 0 0 0; 
padding: 0 0 0 0;

值按顺时针顺序从顶部开始，用空格分隔。换句话说

margin: [top] [right] [bottom] [left]

您必须提供所有四个值，使用0表示该方向没有外边距或内边距。可以使用任何合法的CSS单位，尽管这些属性通常以%、px或em值设置。

相邻和嵌套元素

页面标记中元素的边框、外边距和内边距的配置为您提供了极大的设计灵活性。与其他CSS属性一样，您可以为元素、元素状态（例如，hover）、ID和类分配样式。一点JavaScript或jQuery脚本可以帮助您动态地实现一些相当高级的样式。

您需要注意相邻元素的组合外边距和内边距效果。设置的组合方式并不总是显而易见的——尤其是在样式更改影响渲染页面上的元素放置时。还有一些技巧需要您注意。

首先，让我们看看这里各种不同的边框、外边距和内边距配置

这段代码的HTML非常简单，只是前面示例的扩展。每行文本都包含在一个单独的div中，并且每个div都有一个唯一的ID。

<div id="container">
    <div id="none">Lorem ipsum dolor sit amet....</div>
    <div id="margin">Ut enim ad minim veniam....</div>
    <div id="padding">Duis aute irure dolor....</div>
    ...
</div>

这是相关的CSS

#none {
    border: 1px solid red; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0;}
#margin {
    border: 1px solid red; 
    margin: 20px 20px 20px 20px; 
    padding: 0 0 0 0;}
#padding {
    border: none; 
    margin: 0 0 0 0; 
    padding: 20px 20px 20px 20px;}
#marginpadding {
    border: none; 
    margin: 20px 20px 20px 20px;
    padding: 20px 20px 20px 20px;}
#marginborderpadding {
    border: 20px solid red; 
    margin: 20px 20px 20px 20px; 
    padding: 20px 20px 20px 20px;}

请注意，外边距和内边距是累加的，您需要牢记这一点。这里的5px和那里的10px加起来可能导致元素的意外放置。

但是，有一些例外，其中最重要的是……

外边距折叠

在许多情况下，当两个相邻元素都有顶部或底部外边距接触时，无论您为单个元素设置了什么CSS属性，这些外边距都会合并。这被称为折叠外边距。下面是一个例子

这里的四个div都使用了相同的20px外边距和所有方向的内边距。

#marginpadding {
    margin: 20px 20px 20px 20px; 
    padding: 20px 20px 20px 20px;}

但是请注意，虽然每个元素四周的内边距相等，但元素之间的顶部和底部外边距明显小于20px + 20px = 40px。在这种情况下，结果是好的，并且我们获得了四周适当的外边距。但要注意，这种行为是故意设计的。此外，空元素通常会完全折叠，无论外边距值如何，还有其他规则。要了解更多信息，请阅读W3C CSS推荐的折叠外边距部分，其中详细介绍了外边距如何以及何时折叠。

另一个折叠外边距的情况有点棘手。请记住，在原始HTML示例中，容器有一个边框。如果我们去掉它……

#container {background: gray; width: 600px; margin: 0px auto;}

……瞧，顶部和底部外边距完全折叠了。

一个直接的解决办法是我们最初拥有的：一个与背景融为一体的小边框，或者使用透明颜色值。但是，在更复杂的布局中，您可能最终会 resorting to 使用虚拟元素来抵消折叠行为。仔细阅读CSS推荐应该可以帮助您避免这些情况。

负外边距

到目前为止，所有示例都显示了零或正的外边距值。使用CSS2规范，负外边距值也是完全合法的CSS。简而言之，负的顶部和左侧值可以让您将元素向上和向右拉，而负的底部和右侧值可以将相邻元素拉入并覆盖目标元素。将负外边距与z-index结合使用，您就可以用几行代码创建一些非常时尚的布局。

例如，此CSS将我们之前的线性示例转换为一组重叠的框

#marginpadding {
    margin: 20px 40px 20px 20px; 
    padding: 20px 20px 20px 20px; 
    z-index: 1; 
    position: relative;}
#negativemargin {
    background: orange; 
    margin: -30px 20px -30px 40px; 
    padding: 20px 20px 20px 20px; 
    z-index: 2; 
    position: relative;}

它看起来是这样的：

您可以通过负外边距实现很多很棒的效果，包括多列列表、文本阴影……不一而足。

现在您应该对盒子模型有了很好的掌握。结合一些CSS定位知识——请参阅使用CSS创建流式、多列、垂直排列的列表和相对简单：3个等高列的CSS流式布局——您就可以用很少的代码做很多事情。

祝您编码愉快！