何时在CSS中使用margin和padding


When to use margin vs padding in CSS

在编写CSS时，在决定何时使用margin和何时使用padding时，是否应使用特定的规则或准则？

相关讨论

页边距位于块元素的外部，而填充位于内部。

  • 使用页边距将块与外部对象分隔开
  • 使用填充将内容移离块的边缘。

enter image description here

相关讨论

tl；dr：默认情况下，我在任何地方都使用边距，除非我有边框或背景，并且希望增加可见框内的空间。

对我来说，填充和边距最大的区别是垂直边距自动折叠，而填充则不会。

考虑两个元素，一个在另一个上面，用1em填充。此填充被认为是元素的一部分，并且始终保持不变。

所以您将以第一个元素的内容结束，接着是第一个元素的填充，接着是第二个元素的填充，最后是第二个元素的内容。

因此，这两个元素的内容最终将被分开。

现在用1em的空白代替这个空白。页边距被认为是元素的外部，相邻项的页边距将重叠。

因此，在本例中，您将以第一个元素的内容结尾，然后是合并页边距的1em，然后是第二个元素的内容。因此，这两个元素的内容之间只有1em个距离。

当你知道你想在一个元素周围说一个间隔的1em时，不管它在旁边是什么元素，这是非常有用的。

另外两个大的区别是，填充包括在单击区域和背景颜色/图像中，但不包括边距。

相关讨论

我所看到的最好的解释就是用例子、图表，甚至是一个"自己动手"的视图。

我认为下面的图表可以立即直观地理解这种差异。

enter image description here

要记住的一件事是，标准兼容的浏览器(即怪癖是一个例外)只将内容部分呈现到给定的宽度，所以在布局计算中要跟踪这一点。同样要注意的是，border-box看到了一些反弹，bootstrap 3支持它。

相关讨论

对于您的问题，有更多的技术解释，但是如果您正在寻找一种方法来考虑边距和填充，这将帮助您选择何时以及如何使用它们，这可能会有所帮助。

将块元素与挂在墙上的图片进行比较：

  • 浏览器窗口和墙一样。
  • 内容就像一张照片。
  • 页边空白就像有框图片之间的墙壁空间。
  • 衬垫就像照片周围的垫子。
  • 边框就像框架上的边框。

在决定页边距和填充之间的间距时，最好的经验法则是在与墙上其他内容相关的元素间距时使用页边距，在调整元素本身的外观时使用填充。页边距不会改变元素的大小，但填充通常会使元素变大1。

1可以使用box-sizing属性更改此默认框模型。

相关讨论

边距与填充：

  • 页边距用于在元素中创建该元素与页面其他元素之间的距离。其中padding用于创建元素内容和边框之间的距离。

  • 页边距不是元素的一部分，其中填充是元素的一部分。

    • 请参阅下面从页边距与填充-css属性中提取的图像

    Margin vs Padding

    相关讨论

    这里有一些HTML演示了padding和margin如何影响可点击性和后台填充。一个对象接收到点击到它的填充，但是点击一个对象的边缘区域会转到它的父对象。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $(".outer").click(function(e) {
      console.log("outer");
      e.stopPropagation();
    });

    $(".inner").click(function(e) {
      console.log("inner");
      e.stopPropagation();
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .outer {
      padding: 10px;
      background: red;
    }

    .inner {
      margin: 10px;
      padding: 10px;
      background: blue;
      border: solid white 1px;
    }
    1
    <script src="http://code.jquery.com/jquery-latest.js">

    相关讨论

    关于页边距的问题是，您不需要担心元素的宽度。

    就像当你给一个东西{padding: 10px;}时，你必须将元素的宽度减少20像素，以保持"合适"，并且不干扰它周围的其他元素。

    因此，我通常首先使用填充来获取所有"EDOCX1"(1)，然后使用利润率进行细微的调整。

    另一件需要注意的事情是，在不同的浏览器上，填充更加一致，IE不能很好地处理负利润。

    边缘将清除元素周围的区域(在边框外)，但填充将清除元素内容周围的区域(在边框内)。

    enter image description here

    这意味着您的元素不知道它的外部页边距，所以如果您正在开发动态Web控件，我建议您尽可能使用填充与页边距。

    注意，有时你必须使用保证金。

    来自https://www.w3schools.com/css/cssu boxmodel.asp

    Explanation of the different parts:

    • Content - The content of the box, where text and images appear

    • Padding - Clears an area around the content. The padding is transparent

    • Border - A border that goes around the padding and content

    • Margin - Clears an area outside the border. The margin is transparent

    Illustration of CSS box model

    实况示例(通过更改值进行游戏)：https://www.w3schools.com/css/tryit.asp？文件名=Trycss_-BoxModel

    需要注意的一点是，当自动折叠页边距使您感到恼火(并且您没有在元素上使用背景色)时，使用填充更容易。

    很高兴知道margin和padding之间的区别。以下是一些区别：

    • 边缘是元素的外部空间，而填充是元素的内部空间。

    • 边距是元素边框外的空间，而填充是元素边框内的空间。

    • Margin接受auto的值：margin: auto，但不能将padding设置为auto。

    • 边距可以设置为任意数字，但填充必须为非负。

    • 设置元素样式时，填充也会受到影响(例如背景色)，但不会影响边距。

    解释了进阶边距与填充

    使用padding来分隔元素中的内容是不合适的；您必须在子元素上使用margin。Internet Explorer等较旧的浏览器错误地解释了Box模型，除非它涉及到使用margin，后者在Internet Explorer 4中工作得很好。

    当使用padding适合使用时，有两个例外：

  • 它应用于不能包含任何子元素(如输入元素)的内联元素。

  • 您正在补偿一个非常复杂的浏览器bug，供应商*cooke*mozilla*cooke*拒绝修复该bug，并且确信(在某种程度上，您与w3c和whatwg编辑器进行定期交换)您必须有一个可工作的解决方案，并且此解决方案不会影响任何其他东西的样式，而不会影响您正在补偿的bug。

    • 当你有一个100%宽度的元素与padding: 50px;你有效地得到width: calc(100% + 100px);。由于margin没有添加到width中，因此当您在child elements上使用margin而不是直接在元素上使用padding时，它不会导致意外的布局问题。

    因此，如果您不执行这两项操作之一，则不要向元素添加填充，而是向元素添加直接的子元素/子元素，以确保您能够在所有浏览器中获得预期的行为。

    相关讨论

    首先，让我们看看有什么区别，每个职责是什么：

    1) Margin
    The CSS margin properties are used to generate space around elements.
    The margin properties set the size of the white space outside the
    border. With CSS, you have full control over the margins. There are
    CSS properties for setting the margin for each side of an element
    (top, right, bottom, and left).

    2) Padding
    The CSS padding properties are used to generate space around content.
    The padding clears an area around the content (inside the border) of
    an element. With CSS, you have full control over the padding. There
    are CSS properties for setting the padding for each side of an element
    (top, right, bottom, and left).

    所以简单地说，页边空白是元素周围的空间，而填充是元素内容周围的空间。

    Margin and Padding

    这张来自编码人员的图片显示了边距和边框是如何连接在一起的，以及边框框和内容框是如何使其与众不同的。

    此外，它们还将每个部分定义如下：

    • Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
    • Padding - this clears the main content from its containing box.
    • Border - this surrounds both content and padding.
    • Margin - this area defines a transparent space that separates it from other elements.
    相关讨论

    我总是使用这个原则：

    box model image

    这是firefox中inspect元素功能的box模型。它像洋葱一样工作：

    • 你的内容在中间。
    • 填充是内容和标签边缘之间的空间里面。
    • 边界及其规格
    • 边缘是标签周围的空间。

    因此，较大的页边距会在包含内容的框周围留出更多空间。

    较大的填充空间将增加内容和其所在框之间的空间。

    如果设置为特定值，它们都不会增大或减小框的大小。

    边缘

    边缘通常用于在元素本身和其周围之间创建一个空间。

    例如，我在构建导航栏时使用它，使其贴在屏幕边缘，并且没有空白。

    衬垫

    当我在一个边界内有一个元素，或类似的东西时，我通常使用它，我想减小它的大小，但在我想保持它周围其他元素之间的距离或边距的时候。

    所以简单地说，这是情境性的，这取决于你想做什么。

    边距在框外，填充在框内

    相关讨论