通缉:CSS网格系统和崩溃边距

Question

我认为这是一个艰难的.

我使用网格系统float:left.我可以用它重写它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来获取元素的第一个子元素以摆脱margin-top.但在这种情况下,它将不适用,因为内容是使用CMS构建的,并且在我到达元素之前可能存在任意级别的元素深度.

没有JavaScript,有没有办法做到这一点？

小提琴:http://jsfiddle.net/HerrSerker/ZSV3D/

你可以看到,保证金顶部h1和保证金底部.header不会崩溃.这是一个由手段float:left的.column.

.header {
  font-size: 24px;
  background: rgba(0,255,0,0.1);
}
h1 {
  background: silver;
  margin-bottom: 50px;
  font-size: 28px;
}
.column {
  float: left;
  width: 50%;
  background: rgba(255,0,0,0.1);
}
h2 {
  background: gold;
  margin-top: 50px;
  font-size: 24px;
}

<div class="header"><h1>&lt;h1>Headerh1&lt;/h1></h1></div>
<div class="row">
    <div class="column"><h2>&lt;h2>Col 1, float: left&lt;/h2></h2></div>
    <div class="column"><h2>&lt;h2>Col 2, float: left&lt;/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 2 | |
.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 2 | |
.row       | +-------+ +-------+ |
.row       +---------------------+

-------------------------------------------------------------      

Answer 1

这是不可能的:O

根据规范(https://www.w3.org/TR/CSS2/box.html#collapsing-margins)

倒塌条件:

• 两者都属于参与相同块格式化上下文 的流内块级框
• 没有线框,没有间隙,没有填充,也没有边界将它们分开(请注意,为此目的,忽略某些零高度线框(见9.4.2).)
• 两者都属于垂直相邻的盒子边缘,即形成以下对中的一对:
  • 一个盒子的上边缘和第一个流入的孩子的上边缘
  • 箱子的下边缘和下一个流入的兄弟姐妹的上边缘
  • 如果父项具有"自动"计算高度,则最后一个流入子项的下边距和其父项的下边距
  • 一个框的顶部和底部边距,它没有建立新的块格式化上下文,并且零计算的'min-height',零或'auto'计算'height',并且没有流入的子节点

块容器(例如内联块,表格单元格和表格标题)不是块框

在这种情况下崩溃的利润将打破规则:

• 浮动框和任何其他框之间的边距不会崩溃(甚至在浮动及其流入子代之间也不会).
• 建立新块格式化上下文的元素的边距(例如浮点数和"溢出"除"可见"之外的元素)不会因其流入的子节点而崩溃.
• 绝对定位的盒子的边缘不会坍塌(甚至没有流入的孩子).
• 内联块方框的边距不会崩溃(甚至不包括它们的流入子代).
• 流入块级元素的下边缘总是与其下一个流入块级兄弟的上边缘折叠,除非该兄弟有间隙.
• 如果元素没有顶部边框,没有顶部填充,并且子节点没有间隙,则插入块元素的上边距将与其第一个流入块级子节点的上边距折叠.
• 如果盒子没有底部填充,则"高度"为"auto"且"min-height"为零的流入块盒的底部边缘将与其最后一个流入块级子的底部边缘折叠底部边框和孩子的下边距不会因具有间隙的上边距而崩溃.
• 如果'min-height'属性为零,并且它既没有顶部或底部边框也没有顶部或底部填充,并且它的"高度"为0或"自动",并且它不包含,则框的自身边距会崩溃一个线框,以及所有流入的孩子的边缘(如果有的话)崩溃.

弹性盒也......(https://www.w3.org/TR/css-flexbox-1/#item-margins)

相邻弹性项目的边距不会崩溃.

网格...(https://www.w3.org/TR/css-grid-1/#item-margins)

相邻网格项的边距不会崩溃.

这是不可能的坍塌margin-top: 50px;通过使用这些解决方案之一:inline-block,position: absolute,float,flex,grid.

如果您不能将边距设置为零,也许您可​​以使用许多其他方法来打破边距功能

例如:让h1是inline让格有黄金背景的突破margin-top: 50px;:

根据保证金规范(https://www.w3.org/TR/CSS2/box.html#margin-properties):

边距属性指定框的边距区域的宽度.'保证金'速记属性设定所有四边的保证金,而其他保证金属性仅设定各自的边.这些属性适用于所有元素,但垂直边距不会对未替换的内联元素产生任何影响.

Answer 2

在没有选择器技巧或JavaScript的情况下,实际折叠边距的唯一选项如下:

不要设置margin-top: 50px你的h1,而是打开.row

看到这个小提琴

HTML

<div class="header">Header is normal div</div>
<div class="row">
    <div class="column"><h1>Col 1 is float: left</h1></div>
    <div class="column"><h1>Col 2 is float: left</h1></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.</p>

CSS

.header {
  background: silver;
  height: 50px;
  margin-bottom: 50px;
  font-size: 24px;
}
.row {
  margin-top: 50px;
}
.column {
  float: left;
  width: 50%;
}
h1 {
  background: gold;
  font-size: 24px;
}