什么时候在CSS中使用margin和padding [关闭]

18 回答

• 24

  MARGIN vs PADDING ：

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

  • 边距不是填充是元素一部分的元素的一部分 .

  请参考下面从Margin Vs Padding - CSS Properties中提取的图片

  

  回复于 2024-05-05T04:46:47+08:00
• 537

  Advanced Margin versus Padding Explained

  使用 padding 来空间元素中的内容是不合适的;你必须在子元素上使用 margin . 较旧的浏览器（如Internet Explorer）误解了盒子模型，除非使用 margin ，它在Internet Explorer 4中完美运行 .

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

  • 它应用于不能包含任何子元素（如input元素）的内联元素 .

  • 您正在补偿一个高度混杂的浏览器错误，供应商咳嗽 Mozilla 咳嗽拒绝修复并且确定（在与W3C和WHATWG编辑定期交流的程度）您必须有一个可行的解决方案解决方案不会影响你补偿的其他任何东西的样式 .

  当你有一个带有 padding: 50px; 的100％宽度元素时，你实际上得到 width: calc(100% + 100px); . 由于 margin 未添加到 width ，因此在元素上直接在 child elements 而不是 padding 上使用 margin 时，不会导致意外的布局问题 .

  因此，如果你没有做这两件事中的一件，就不要在元素中添加填充，而是要在所有浏览器中获得预期的行为's direct child/children element(s) to ensure you' .

  回复于 2024-05-05T04:46:47+08:00
• 30

  我总是使用这个原则：

  

  这是Firefox中inspect元素功能的盒子模型 . 它像洋葱一样工作：

  • 您的内容位于中间 .

  • 填充是内容与其内部标记边缘之间的空格 .

  • 边界及其规格

  • 边距是标签周围的空间 .

  如此大的利润空间将在包含您内容的盒子周围留出更多空间 .

  较大的填充将增加内容与其内部框之间的空间 .

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

  回复于 2024-05-05T04:46:47+08:00
• 30

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

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

  • browser window 就像墙一样 .

  • content 就像一张照片 .

  • margin 就像是框架图片之间的墙面空间 .

  • padding 就像照片周围的消光一样 .

  • border 就像一个框架上的边框 .

  当在margin和padding之间做出决定时，当你将一个元素与墙上的其他东西间隔开时，使用 margin 是一个很好的经验法则，当你改变元素的大小时， padding ，但填充通常会使元素更大1 .

  1可以使用box-sizing attribute更改此默认框模型 .

  回复于 2024-05-05T04:46:47+08:00
• 19

  边距清除元素周围的区域（边框外），但填充清除元素内容（边框内）周围的区域 .

  

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

  请注意，有时您必须使用保证金 .

  回复于 2024-05-05T04:46:47+08:00
• 1374

  不同部分的说明：

  内容 - 显示文本和图像的框的内容

  填充 - 清除内容周围的区域 . 填充是透明的

  边框 - 围绕填充和内容的边框

  保证金 - 清除边界以外的区域 . 保证金是透明的

  

  以下是实例:(玩改变值）http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

  回复于 2024-05-05T04:46:47+08:00
• 79

  保证金

  边距通常用于在元素本身与其环绕之间创建空间 .

  例如，当我构建导航栏使其粘在屏幕边缘并且没有白色间隙时，我会使用它 .

  填充

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

  简而言之，它是情境化的;这取决于你想要做什么 .

  回复于 2024-05-05T04:46:47+08:00
• 77

  TL;DR: 默认情况下，我在任何地方使用边距，除非我有边框或背景，并且想要增加可见框内的空间 .

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

  考虑两个元素，一个在另一个之上填充 1em . 此填充被视为元素的一部分，并始终保留 .

  因此，您将得到第一个元素的内容，然后是第一个元素的填充，接着是第二个元素的填充，接着是第二个元素的内容 .

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

  现在用1em边距替换该填充 . 边距被认为是在元素之外，并且相邻项目的边距将重叠 .

  因此，在此示例中，您将得到第一个元素的内容，后跟 1em 的组合边距，后跟第二个元素的内容 . 所以这两个元素的内容只相隔_346125 .

  当你知道你想要在一个元素周围说出 1em 的间距时，这可能非常有用，无论它在哪个元素旁边 .

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

  回复于 2024-05-05T04:46:47+08:00
• 1305

  保证金在盒子外面，填充物在盒子里面

  回复于 2024-05-05T04:46:47+08:00
• 12

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

  • 边距是元素的外部空间，而填充是元素的内部空间 .

  • 边距是元素边框外的空间，而边距是边框内的空间 .

  • Margin接受auto： margin: auto 的值，但不能将填充设置为auto .

  • 保证金可以设置为任何数字，但填充必须是非负数 .

  • 为元素设置样式时，填充也会受到影响（例如背景颜色），但不会影响边距 .

  回复于 2024-05-05T04:46:47+08:00
• 9

  关于边距的事情是你不需要担心元素的宽度 .

  就像你给出 {padding: 10px;} 的东西一样，你必须通过 20px 来减小元素的宽度以保持' fit '并且不会打扰它周围的其他元素 .

  所以我通常首先使用填充来获取所有内容' packed '，然后使用边距进行小调整 .

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

  回复于 2024-05-05T04:46:47+08:00
• 5

  CSS Margin，padding和border是Box Model属性 .

  • 保证金是内容之外的空间 .

  • 填充是内容中的空间 .

  • 边框是填充外部的可见轮廓（任何颜色，样式和宽度） .

  总宽度=内容宽度填充边框 .

  回复于 2024-05-05T04:46:47+08:00
• 4

  何时使用边距和填充

  CSS中有两种方法可以在元素周围创建空间：边距和填充 . 在大多数使用场景中，它们在功能上是相同的，但事实上，它们的行为方式略有不同 . 在选择用于在页面周围移动元素的边距时，应考虑边距和填充之间的重要差异 . 然而，在边缘或填充可以用于相同效果的那些情况下，很多决定归结为个人偏好 .

  When to use margins

  • 您希望间距显示在边框属性创建的“框”之外 . 边距位于边界之外，因此如果您希望边框位于一个位置，则可以使用它们 . 例如，如果您有一个带有边框的侧边栏，您希望远离主要内容区域，则此功能非常有用 .

  • 您不希望背景颜色或图像侵入您的个人空间 . 背景颜色和图像停在边框处，因此如果您希望将背景保留在正在制作的空间之外，则边距是您想要的属性 .

  • 您希望元素顶部和底部的可折叠空间 . 顶部和底部边距的行为与边缘不同，因为如果两个边距彼此叠加，它们会折叠到最大边距集的大小 . 例如，如果我将段落设置为20像素的上边距和15像素的下边距，我将在段落之间只有20像素的空间（两个边距相互折叠，最大的胜出） .

  When to use padding

  • 您希望您创建的所有空间都在边框内 . 填充包含在您的边框内，因此将边框推离元素内部非常有用 .

  • 您需要背景颜色/图像才能继续进入您正在创建的空间 . 您的背景将继续在您的填充后面，所以只有在您希望您的背景透视时才使用它 .

  • 您希望顶部和底部空间的行为更加严格 . 例如，如果您将文档中的段落设置为20像素的顶部填充和15像素的底部填充，那么只要您连续有两个段落，它们实际上总共有35个像素的空间它们之间 .

  回复于 2024-05-05T04:46:47+08:00
• 27

  我自己尝试的最好的是here .

  我认为下面的图表可以立即直观地了解差异 .

  

  要记住的一件事是符合标准的浏览器（IE quirks is an exception）仅将内容部分渲染到给定宽度，因此在布局计算中跟踪此情况 . 另请注意，边框有点支持它的comeback with Bootstrap 3 .

  回复于 2024-05-05T04:46:47+08:00
• 17

  下面是一些HTML，演示 padding 和 margin 如何影响可点击性和后台填充 . 对象接收对其填充的单击，但点击对象边距区域将转到其父级 .

  $(".outer").click(function(e) {
    console.log("outer");
    e.stopPropagation();
  });
  
  $(".inner").click(function(e) {
    console.log("inner");
    e.stopPropagation();
  });
  

  .outer {
    padding: 10px;
    background: red;
  }
  
  .inner {
    margin: 10px;
    padding: 10px;
    background: blue;
    border: solid white 1px;
  }
  

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <div class="outer">
    <div class="inner" style="position:relative; height:0px; width:0px">
  
    </div>
  </div>
  

  回复于 2024-05-05T04:46:47+08:00
• 13

  首先让我们看看有什么不同，每个责任是什么：

  1）边距CSS边距属性用于生成元素周围的空间 . 边距属性设置边框外的空白区域的大小 . 使用CSS，您可以完全控制边距 . 有一些CSS属性可用于设置元素每一边的边距（顶部，右侧，底部和左侧） .

  2）填充CSS填充属性用于生成内容周围的空间 . 填充清除元素内容（边框内）周围的区域 . 使用CSS，您可以完全控制填充 . 有一些CSS属性可用于为元素的每一侧（顶部，右侧，底部和左侧）设置填充 .

  所以简单地说 Margins 是元素周围的空间，而 Padding 是内容周围的空间，它们是元素的一部分 .

  

  来自codemancers的图像显示了边距和边框如何得到以及边框和内容框如何使其不同 .

  他们还定义了每个部分如下：

  内容 - 这定义了框的内容区域，其中包含文本，图像或其他元素等实际内容 . 填充 - 这将清除其包含框中的主要内容 . 边框 - 它包含内容和填充 . 边距 - 此区域定义了一个透明空间，将其与其他元素分开 .

  回复于 2024-05-05T04:46:47+08:00
• 13

  边距位于块元素的外侧，而填充位于内部 .

  • 使用边距将块与其外部的东西分开

  • 使用填充将内容移离块的边缘 .

  

  回复于 2024-05-05T04:46:47+08:00
• 0

  有一点需要注意的是，自动折叠边距会让你烦恼（并且你没有在元素上使用背景颜色），这就更容易使用填充 .

  回复于 2024-05-05T04:46:47+08:00