Question

为什么内容div上的保证金也会压低介绍div？我觉得在嵌入div时我犯了一个非常愚蠢的错误，但我真的不知道。

＆＃13;

body {
  margin: 0px;
}
div.content {
  text-align: center;
  margin-top: 35px;
  border-style: solid;
}
h1 {
  display: inline-block;
  margin: auto;
  font-family: Lane;
  color: white;
  font-size: 80px;
}
div#intro {
  background: blue;
  height: 100%;
  width: 100%;
}

＆＃13;

<div id=intro>
  <div class=content>
    <h1>Text</h1>
  </div>
</div>

＆＃13;

Answer 1

这是因为垂直margins are collapsing。

Box Model 8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

当两个或多个边距折叠时，生成的边距宽度是折叠边距宽度的最大值。在负边距的情况下，负邻接边距的绝对值的最大值从正邻接边距的最大值中减去。如果没有正边距，则相邻边距的绝对值的最大值将从零中扣除。

查看relevant spec，了解适用于所有可能解决方法的规则。

例如，一条规则是：

建立新的块格式化上下文的元素的边距（例如浮点数和Array<T?>除fun <T: Any> Array<T?>.asNotNull(): Array<T> { if (this.any { it == null }) { throw IllegalStateException("Cannot cast an array that contains null") } @Suppress("CAST_NEVER_SUCCEEDS") return this as Array<T> }之外的元素）不会因其流入的子节点而崩溃。

因此，在您的情况下，您只需将val nullableStrings = arrayOfNulls<String>(10000).apply { fill("hello") } val strings = nullableStrings.asNotNull() // magic! val upperStrings = strings.map { it.toUpperCase() } // no error元素上的overflow属性更改为默认值visible以外的其他属性即可。 overflow / #intro等值可以使用：

visible

auto

Answer 2

使用＆＃34; Text＆＃34;在两个div中，它们也可能是一个单独的div。此外，＆＃34;身体＆＃34;如果您不使用<body>和</body>标记，则样式无效。更完整的HTML可能有助于我们为您提供解决方案。

嵌套div中的垂直边距不能按预期工作

2 个答案: