我使用浮动的网格系统：左。我可以用display：inline-block重写它，但是这不会改变一个东西。
假设我们有两列：
<div class="row">
<div class="column">
<!-- some content here -->
</div>
<div class="column">
<!-- some content here -->
</div>
</div>
如果我在其中放置了带有margin-top的块元素(例如< h1>)，我将获得不折叠的边距。这是正常的，因为它总是与浮动元素(或显示：内联块)一样。
但是我想要收缩的利润。我尝试了很多工作，但似乎每个CSS将两个元素相邻，将会破坏上述内容的折叠边距。
我知道，我可以使用CSS来获取元素的第一个孩子来摆脱边缘顶部。但是在这种情况下，它将不适用，因为内容是使用CMS构建的，并且在到达元素之前可能会有任意级别的元素深度。
有没有JavaScript的方法？
小提琴：http://jsfiddle.net/HerrSerker/ZSV3D/
你可以看到，h1的margin-top和.header的margin-bottom不会崩溃。这是通过float：.column的左边。
.header {
font-size: 24px;
background: rgba(0,255,0.1);
}
h1 {
background: silver;
margin-bottom: 50px;
font-size: 28px;
}
.column {
float: left;
width: 50%;
background: rgba(255,0.1);
}
h2 {
background: gold;
margin-top: 50px;
font-size: 24px;
}
<div class="header"><h1><h1>Headerh1</h1></h1></div>
<div class="row">
<div class="column"><h2><h2>Col 1,float: left</h2></h2></div>
<div class="column"><h2><h2>Col 2,float: left</h2></h2></div>
</div>
<p>I want a 50 pixel margin between Header and the Cols,but the two margins don't collapse and I end up with 50 + = 100 pixel gap. If it would work,you wouldn't see the light red above col1 and col2</p>
编辑
我可以在CSS中使用一些后继操作符，如header .row .column h1 {margin-top：0;}。但这不是我想要的。我想要的是一种设置元素的方式，它们与包含元素的边缘崩溃一起使用。
EDIT2
所以情况和问题再一次简单。
问题很简单。我有一些CSS代码，它允许我设置两个或更多的div彼此相邻，如float：left;宽度：50％。在这些div之内是像h2这样的元素，它们有一个顶点。如果在一个div之前有一个h1与底边。这种情况不允许h1和h2的边缘崩溃。是否有机会将元素放在彼此之间，边缘崩溃，而不是手动将边距设置为零？
否则。在创建新的块格式上下文之前，是否有任何设置元素相邻的机会？
EDIT3：
-------------------------------------------------------------
What it is:
.header +---------------------+
.header | +-----------------+ |
.header | | h1 | |
.header | +-----------------+ | ----+---
.header +---------------------+ |
| margin-bottom of h1
|
-----------------------------+---
|
| margin-top of h2
.row +---------------------+ | not collapsing
.row | +-------+ +-------+ | ----+---
.row | | h2 | | h2 | |
.row | | in | | in | |
.row | | col 1 | | col 1 | |
.row | +-------+ +-------+ |
.row +---------------------+
-------------------------------------------------------------
What I want:
.header +---------------------+
.header | +-----------------+ |
.header | | h1 | |
.header | +-----------------+ | ----+---
.header +---------------------+ | margin-bottom of h1
| and margin-top of h2
.row +---------------------+ | collapsing
.row | +-------+ +-------+ | ----+---
.row | | h2 | | h2 | |
.row | | in | | in | |
.row | | col 1 | | col 1 | |
.row | +-------+ +-------+ |
.row +---------------------+
-------------------------------------------------------------
解决方法
根据规格(https://www.w3.org/TR/CSS2/box.html#collapsing-margins)
折叠状况：
- both belong to in-flow block-level Boxes that
participate in the same block
formatting context- no line Boxes,no clearance,no padding and no border
separate them (Note that certain zero-height line
Boxes (see 9.4.2)
are ignored for this purpose.)- both belong to vertically-adjacent Box edges,i.e. form one
of the following pairs:
- top margin of a Box and top margin of its first in-flow child
- bottom margin of Box and top margin of its next in-flow
following sibling- bottom margin of a last in-flow child and bottom margin of its
parent if the parent has ‘auto’ computed height- top and bottom margins of a Box that does not establish a new
block formatting context and that has zero computed ‘min-height’,zero or ‘auto’
computed ‘height’,and
no
in-flow childrenblock containers (such as inline-blocks,table-cells,and
table-captions) that are not block Boxes
在这种情况下，利润率的崩溃会破坏规则：
- Margins between a floated
Box and any other Box do not collapse (not even between a float and
its in-flow children).
- Margins of elements that establish new block formatting
contexts (such as floats and elements with ‘overflow’ other than ‘visible’)
do not collapse with their in-flow children.- Margins of absolutely positioned
Boxes do not collapse (not even with their in-flow children).
- Margins of inline-block Boxes do not collapse (not even
with their in-flow children).
- The bottom margin of an in-flow block-level element always
collapses with the top margin of its next in-flow block-level
sibling,unless that sibling has clearance.- The top margin of an in-flow block element collapses with
its first in-flow block-level child’s top margin if the element has
no top border,no top padding,and the child has no clearance.- The bottom margin of an in-flow block Box with a ‘height’ of ‘auto’ and a ‘min-height’ of zero collapses
with its last in-flow block-level child’s bottom margin if the Box
has no bottom padding and no bottom border and the child’s bottom
margin does not collapse with a top margin that has clearance.- A Box’s own margins collapse if the ‘min-height’ property is zero,
and it has neither top or bottom borders nor top or bottom padding,
and it has a ‘height’ of
either 0 or ‘auto’,and it does not contain a line Box,and all of
its in-flow children’s margins (if any) collapse.
弹性箱也…(https://www.w3.org/TR/css-flexbox-1/#item-margins)
The margins of adjacent flex items do not collapse.
网格也…(https://www.w3.org/TR/css-grid-1/#item-margins)
the margins of adjacent grid items do not collapse.
折叠边缘是不可能的：50px;通过使用这些解决方案之一：inline-block，position：absolute，float，flex，grid。
如果不能将边距设置为零，也许您可以使用其他方法来打破边距函数
例如：让h1在线，让div有金色的背景打破margin-top：50px ;:
根据保证金规格(https://www.w3.org/TR/CSS2/box.html#margin-properties)：
Margin properties specify the width of the margin area of a Box. The
‘margin’ shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These properties apply to all elements,but vertical margins will not have any effect on non-replaced inline elements.
