Question

当包含框的顶部margin与其第一个孩子的顶部margin折叠时，如何计算包含框的height（示例中为div）？< / p>

举个简单的例子：

div {
  margin: 40px 0 25px 0;
  background: yellowgreen;
  /*   border:1px solid black; */
}
p {
  margin: 20px 0 20px 0;
  background: lightgreen;
  padding: 10px;
}

<div>
  <p>Paragraph content</p>
</div>

p边距会因div而崩溃，因此我们看不到div的背景颜色。将border添加到div可以阻止保证金崩溃。

但是，由于p的{{1}}也属于margin的{{1}}，这意味着div不再包含margin完全。这是反制的。

我浏览了Calculating heights and margins规范和Collapsing margins，但无法找到如何计算div的{{1}}。因为您无法确定p的{{1}}。

Answer 1

在这种情况下，由于collapsing margins div除height之外，p与padding具有相同的p

您通过计算height * font-size知道line-height s font-size: 16px，在您的情况下将是：

line-height:1.25 * 20px = p

所以，

height:20px有div
p，由于10px额外padding height:40px，它是body { margin: 0 } div { margin: 40px 0 25px; background: red; /* border:1px solid black; */ } p { margin: 20px 0; background: lightgreen; padding: 10px }

＆＃13;

<div>
  <p>Paragraph content</p>
</div>

＆＃13;

font-size

＆＃13;

见：

注意：（由@LGSon提供）

如果未设置line-height / div，则会使用浏览器默认值，在这种情况下可以提供var canvasData = canvas.toDataURL("image/jpeg"); canvasData = encodeURIComponent(canvasData); var formData=new FormData(); formData.append("imagedata", canvasData); $.ajax({ url : <my upload url>, data : formData, type : "POST" dataType : "JSON", contentType : false, processData : false })的不同输出/大小

计算包含箱子的高度和倒塌边距

1 个答案: