CSS折叠边距的点是什么？ [英] What is the point of CSS collapsing margins?

问题描述

CSS2框模型告诉我们，相邻的垂直边距会崩溃。

The CSS2 box model tells us that adjoining vertical margins collapse.

我觉得很讨厌，是许多设计错误的来源。我希望通过理解折叠边缘的目的，我将理解何时使用它们，以及如何在不需要时避免它们。

I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed.

这是什么意思特征？

推荐答案

margin的一般含义不是传达move this over 10px

The general meaning of "margin" isn't to convey "move this over by 10px" but rather, "there must be 10px of empty space beside this element."

我一直觉得这是最容易用段落来概念化的。

I've always found this is easiest to conceptualize with paragraphs.

如果你刚刚给了 margin-top：10px 段落，并且在任何其他元素上没有边距，一系列段落将被美丽地间隔开。但当然，当在段落下放置另一个元素时，你会遇到麻烦。

If you just gave paragraphs margin-top: 10px and had no margins on any other elements, a series of paragraphs would be spaced beautifully. But of course, you'd run into trouble when placing another element underneath a paragraph. The two would touch.

如果边距没有收合，您会犹豫要添加 margin-bottom：10px 到你以前的代码，因为那么任何一对段落将间隔20px，而段落将与其他元素分开只有10px。

If margins didn't collapse, you'd hesitate to add margin-bottom: 10px to your previous code, because then any pair of paragraphs would get spaced 20px apart, while paragraphs would separate from other elements by only 10px.

所以垂直边缘折叠。通过添加10px的顶部和底部边距，你说，我不在乎什么其他元素的边缘规则，我要求在每个段落的上方和下方至少10px的填充。

So vertical margins collapse. By adding top and bottom margins of 10px you're saying, "I don't care what margin rules any other elements have. I demand at least 10px of padding above and below each of my paragraphs."

这篇关于CSS折叠边距的点是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！