填充与边缘的儿童 [英] Padding vs children with margins

问题描述

让我们开始说我明白盒子模型。在我作为开发人员的短暂时间内，我试图非常密切地关注语义HTML和使用响应式设计实践。我最近在一家新公司作为Jr.开发商工作，我的Sr.宗教上反对填充。就像他不想在任何情况下使用它。他希望我在一切上使用设置的高度和宽度，如果我需要模拟填充，我必须添加一个孩子div使用边距。例如：

Let's just start with saying I understand the box model. Throughout my short time as a developer, I've tried to stick very closely to semantic html and use responsive design practices. I recently got a job at a new company as Jr. Developer, and my Sr. is religiously against padding. Like he doesn't want it used in any case whatsoever. He wants me to use set heights and widths on everything, and if I need to simulate padding, I have to add a child div using margins. For example:

<div class="caption" style="padding: 5px;">
   Caption
</div>

需要成为

<div class="caption">
   <div class="captionContainer" style="margin:5px;">
       Caption
   </div>
 </div>

我试图找出为什么会是这样，我怎么可能解释为什么我认为这是坏的，但它不工作。这看起来对我来说错了。他说，这是因为填充延伸了一个元素的宽度，我回答box-sizing：border-box。

I've tried to figure out why this would be, and how I could possibly explain why I think that's bad, but it doesn't work. It just seems so wrong to me. He's said that it's because padding stretches the width of an element, to which I responded with box-sizing:border-box.

我必须做他说的话，但有时我们谈论它，他似乎有点接受我的建议，但我不认为我说正确的事情。它实际上更好吗？如果不是，为什么？

I have to do what he says, but sometimes we talk about it, and he does seem somewhat receptive to my suggestions, but I don't think I'm saying the right things. Is it actually better? If it's not, why?

这个问题可能会因为讨论而结束 - 但是这一直让我疯狂，我不知道别的地方。

This question may get closed for being kinda discussion-y but this has been driving me crazy, and I don't know where else to turn.

提前感谢！

推荐答案

这是任何 。使用其他方法添加填充到框中没有任何意义，当为这个确切的目的， padding 的CSS属性已经存在，因为几乎永远。

It's anything but better. There is no sense in trying to add padding to a box using other methods when a CSS property made for this exact purpose, padding, has existed since pretty much forever.

无论如何，我可以想到的一个反例是，相邻的垂直边距可以 collapse 。

Anyway, one counter-example I can think of is the fact that adjoining vertical margins can collapse.

有几种方法来取消边缘崩溃（heck，给一个元素填充是一个！），但这些方法不是 ，并且没有用于折叠的简单关闭开关。

There are several ways to cancel margin collapse (heck, giving an element padding is one!), but these methods aren't designed for preventing margin collapse as much as they do so as a side effect, and there is no simple "off switch" for collapsing.

不理解折叠的性质和目的的作者会发现自己有一个处理它的麻烦。如果你要使用边距来模拟填充，你可能会很困难。这不值得。

Authors who don't understand the nature and the purpose of collapsing will find themselves having a world of trouble dealing with it. If you're going to use margins to simulate padding you may be in for a hard time. It's not worth it.

您的给定标记是当边缘崩溃可能意外发生并引起头痛的一个典型示例：如果您的<$ c $上没有其他样式c> .caption 元素（像边框或填充）， .captionContainer 的边距将与 .caption ，导致类似此发生。同样，这是一个很好的反例，当试图模拟填充使用利润率结束后退。

Your given markup is a prime example of when margin collapse can happen unexpectedly and cause headaches: if there are no other styles on your .caption element (like borders or padding), the margins of .captionContainer will combine with those of .caption, resulting in something like this happening. In the same vein, it's a great counter-example of when trying to simulate padding using margins ends up backfiring.

相比，由于利润崩溃引起的潜在问题，我诚实找到您的建议使用 box-sizing：border-box 一个好的案例，使用边距来模拟填充，同时保留您需要的精确宽度，因为它 / em>来解决这个问题。浏览器支持也是相当不错的（IE8 +），所以除非你正在设计真正的旧浏览器，应该可以使用它。

Compared to the potential issues caused by margin collapse, I honestly find your suggestion of using box-sizing: border-box a good case against using margins to simulate padding, while preserving the exact widths that you need because it's designed to solve that problem. Browser support is fairly decent too (IE8+), so unless you're designing for really old browsers, it should be OK to use it.

还有几个潜在的缺陷使用利润来做 padding 显然是做的事，但利润率崩溃是你面临的最大问题之一。

There are several other potential pitfalls of using margins to do things that padding was clearly made to do, but margin collapse is one of the biggest issues you'll face.

这篇关于填充与边缘的儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！