如何设置 CSS 的外边距和内填充（附布局小技巧）

原文链接：How to Set CSS Margins and Padding (And Cool Layout Tricks)

作者：Baljeet Rathi

译者：liangzr

转载请注明出处。

刚接触 CSS 时，外边距（margin）和内填充（padding）属性总是让我感到困惑。他们似乎非常相似，并在某些情况下产生的效果是一样的。

在本文中，您将了解到 CSS 外边距与内填充的差异，以及它们是如何影响网页各个元素之间的空间。我们还将讨论外边距的收缩，使用不同的尺寸单位来创建响应式网站，并总结一些有关内外边距的布局小技巧。

在 CSS 中以矩形盒子来描述一个元素，这个盒子的尺寸由元素的以下属性决定：

从图中可以看到，元素的 padding 是从 content 的外边缘延伸到 border 的内边缘。这个属性主要用来控制元素的 border 和他们 content 之间的距离。应用在一个元素上的 padding 会影响它在网页上的尺寸，而不会影响不同元素之间的距离。

当你想要增加或减少元素之间的距离时，应该用 margin 属性，margin 不会影响元素的大小。

元素的盒子有个很重要的点你应该记住，网页上所有盒子的尺寸取决于正在使用的盒模型，有两种不同的盒模型：

Codepen 在线演示：Choosing a Box Model

HTML

CSS

结果

W3C 盒模型认为元素的宽度（width）等于元素的 content，而不包括它的 padding 和 border, padding 和 border 被添加到元素的外层而无论元素本身有多大，这可能会让你的页面产生一些不可预测的后果。

例如，我们有一个 width 和 height 都为 200px、padding 为 10px 以及 border 为 2px 的盒子。浏览器并不简单认为它就是个 200px 大小的盒子，相反，浏览器计算出的最终 width 为 224px: 200(width) + 2(左 border) + 10(左 padding) + 10(右 padding) + 2(右 border) = 224px. 因为这个元素是一个完美的正方形，它的 height 也同样被计算为 224px.

再来看另一种，传统盒模型认为元素的 width 等于元素的 content、padding 和 border 之和。在布局时，这意味着如果你的盒子 width 为 200px ，浏览器会计算出它要显示的最终 width 就是 200px，它包括了 padding 和 border。这会产生更可预测的结果，并更容易使用。

默认情况下，所有浏览器都使用 W3C 盒模型。你可以通过设置 box-sizing 属性的值为 content-box（W3C 盒模型）或 border-box（传统盒模型）来选择指定的盒模型。传统的盒模型更直观，是 Web 开发人员中最流行的做法。

以下代码可以让你的项目遵循传统盒模型：

如果你想更深入的了解，可以尝试下 Guy Roluledge 这个有趣的互动演示。

你可以通过设置 padding-top、padding-right、padding-bottom 和 padding-left 来控制元素四个边的 padding，你还可以使用 padding 简写属性。

在下面的演示中，橙色背景表示不同元素的 content 区域，border 和 content 之间的白色区域表示每个元素的 padding：

Codpen 在线演示：Setting Paddings同理你可以用类似 padding 的方法控制元素四个边的 margin 值。

在使用 padding 和 margin 时，最好不要使用绝对单位（比如 px），这些单位不会自适应字体大小和屏幕的变化。

假设你将一个元素的 width 设置为 50%，margin 为 15px。在父元素 width 为 1200px 时（子元素 width 的百分值根据父元素的 width 来确定大小），子元素的 width 为 600px，边距为 15p。然而在 769px 时，子元素的 width 将是 384px，但它的 margin 还是 15px。

在这个例子中，元素的宽度改变了 36%，但它的边缘并没有随之改变。多数情况下这不算个大问题，但是使用百分比设置 margin 可以对你的网页有更好的控制，你可以让一切属性随比例变化，而不是忽略掉 margin 和 padding。

Codepen 在线演示：Setting Margins as Percentage

同样你可能希望为网页上的文字元素添加 padding。通常你也会希望 padding 值能与字体大小成比例，绝对单位是无法实现的。但是如果用 em 单位来指定 padding，它就能根据字体大小而改变。

Codepen 在线演示：Right Units for Margins and Padding

浏览器计算 margin 和 padding 的方式和元素不同。

任何使用百分比来设置的 margin 和 padding 都是根据包含它的元素（父元素）的尺寸来计算的。意思就是说当父元素 width 为 100px 时，5% 的 padding 就是 5px，当父元素为 1000px 时，它就是 50px。同理顶部和底部也是如此。

在使用 em 作为单位时，margin 和 padding 的计算是根据元素字体的大小。在前面的 Codepen 演示中，应用于底部的三个文本元素的 padding 都是 1em，然而由于字体大小不同，每次的 padding 也是不同的。

另外还有 4 种基于浏览器视窗（viewport）的单位如 vw、vh、vmin 和 vmax。这时 margin 和 padding 的计算是基于 viewport 的。比如 viewport 的 width 为 500px 时，5vw 的 padding 等同于 25px，10vw 就是 50px。你可以在 SitePoint 上的 CSS Viewport Units: A Quick Start 文章中了解更多。

作为一个初学者，了解这些不同的单位如何工作可以帮助你快速了解为了 HTML 元素的 padding 和 margin 根据父元素的大小、字体大小甚至是浏览器视窗而改变，这能让你更好的控制页面布局。

在某些情况下，两个元素顶部和底部的 margin 会合并成一个，这种现在叫 margin 塌陷。

假设你有两个并排的同级元素，如果第一个元素的 margin-bottom 设置为 40px，而第二个元素的 margin-top 设置为 25px，则最终两个元素之间的间距不会是 65px。实际值将取值较大者，也就是 40px。

Codepen 在线演示：Collapsing Margins - Adjacent Siblings

同样，margin 也可以在父元素与第一个/最后一个元素之间发生塌陷。这会在没有 border、padding 以及内联元素来分离父子元素的对应 margin 时触发。在这种情况下，如果父元素没有 padding 或 border，则子元素的 margin 看起来像从父元素里溢出来一样。

避免这种情况的一种方法是在父元素和边缘和子元素的边缘增加一个障碍，可以使用 border 或 padding 来实现。演示如下：

Codepen 在线演示：Collapsing Margins - Parent and First Child

在 margin 为负的情况下，margin 塌陷的最终值为最大正值 margin 和最小负值 margin 之和。

你可以阅读 Adam Roberts 的 Collapsing Margins 了解更多。

有些时候，你可以使用 CSS margin 和 padding 来解决许多布局问题。如下面几个例子：

子元素居中

在块级元素中，margin 可以很容易的实现水平居中。你需要做的就是设置 margin-left 和 margin-right 属性为 auto。

在下面的演示中，你可以看到三个父元素：第一个被设置为块级元素，第二个为内联块元素，第三个是浮动在右侧的块级元素。

维持图片比例

一般情况下，网页上的图片并没有固定的宽高比。如果你一定要让所有的图片都有相同的宽高比，CSS 可以帮助你实现。

这个小技巧就是将父元素的 height 值设置为 0，并且设置 padding-top 值设置为想要实现的宽高比。

例如，实现 16 : 9 的宽高比可以设置:

这个 56.25% 是能过 16 / 9 计算得出的，可以计算百分比来实现你需要的比例。

Codepen 在线演示：Maintaining Image Aspect Ratio

你可以阅读 Craig Buckler 的 How to Maintain Image Aspect Ratios in Responsive Web Design 了解更多。

关于 margin 和 padding 还有更高级的技巧，比如创建在有限宽度和父元素中创建全宽的子容器，或是在页面上不同模块的底部添加一致的间距。你可以考虑学习这些内容来进阶你的 CSS 水平。

如果你刚刚接触 CSS，希望本教程可以帮你了解 margin 和 padding 之间的差异。你应该学会使用简写语法以及以适当的单位设置 margin 和 padding。在最后一节，我提到了一些布局小技巧，并指出了更多的资源以了解更多。