为什么保证金在块内不起作用？ [复制]答案

【问题标题】：Why margin doesn't work inside the block? [duplicate]为什么保证金在块内不起作用？ [复制]
【发布时间】：2015-12-29 06:13:10
【问题描述】：

我有这个代码：

<div class='block'>
  <div class='container'></div>
</div>

.block {
  display: block;
  height: 100px;
  width: 100px;
  background: black;
}
.container {
  display: block;
  width: 30px;
  height: 30px;
  background: red;
  margin: 50px;
}

我不明白为什么margin 在块内不起作用？

JsFiddle：https://jsfiddle.net/39yy7a0q/

【问题讨论】：

边距有效，但您正在试验 CSS 的边距折叠功能。您可以解决定义边框或填充的此类问题。看到这个小提琴：jsfiddle.net/39yy7a0q/7 .block { display: block;高度：100px；宽度：100px；背景：黑色；边框：1px纯黑色； }
jsfiddle.net/39yy7a0q/8 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/… 如果您需要原因（并且您已经问过“为什么”）-请查看这篇文章....
您可以将.block 溢出设置为隐藏或添加一个小填充。 jsfiddle.net/39yy7a0q/10
问题是你的容器类的显示属性。 INLINE-BLOCK 设置为 inline-block 的元素与 inline 非常相似，因为它将设置为与文本的自然流（在“基线”上）内联。不同之处在于您可以设置将受到尊重的宽度和高度。 DISPLAY:BLOCK 它们通常是容器元素。还有像
和

这样的文本“块”。块级元素不是内联的，而是突破它们。默认情况下（不设置宽度），它们尽可能多地占用水平空间。演示：jsfiddle.net/39yy7a0q/11

标签： html css

【解决方案1】：

试试下面的css。我已将位置添加到.container，并调整了margin 值，因为它应该与父母的宽度相关。 https://jsfiddle.net/39yy7a0q/4/

.block {
    display: block;
    height: 100px;
    width: 100px;
    background: black;
}

.container {
    display: block;
    position:absolute;
    width: 30px;
    height: 30px;
    background: red;
    margin: 35px;
}

【讨论】：

问题是你的容器类的显示属性。 INLINE-BLOCK 设置为 inline-block 的元素与 inline 非常相似，因为它将设置为与文本的自然流（在“基线”上）内联。不同之处在于您可以设置将被尊重的宽度和高度。 DISPLAY:BLOCK 它们通常是容器元素。还可以发送文本“块”，例如 <p> 和 <h1>。块级元素不是内联的，而是突破它们。默认情况下（不设置宽度）它们尽可能多地占用水平空间。演示：jsfiddle.net/39yy7a0q/11

这样的文本“块”。块级元素不是内联的，而是突破它们。默认情况下（不设置宽度），它们尽可能多地占用水平空间。演示：jsfiddle.net/39yy7a0q/11