html - 上边距的空间从何而来？

Question

我开始学习 CSS，我在网上找到了那个例子: https://www.w3schools.com/css/tryit.asp?filename=trycss_margin_shorthand

但我尝试使用它，并改变了一些东西。现在代码如下所示:

 div#my {
        border: 8px solid black;
        margin-left: 0%;
        margin-right: 0%;
        
        height: 500px;
        
        background-color: red;
    }
    
    div {
        border: 5px solid black;
        margin: inherit;
        background-color: lightblue;
    }
    
    

<div id="my">
   <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</div>

我看到的是一个大红色方 block 里面的一个大蓝色方 block 。蓝色方 block 的左右两侧向红色方 block 的边界坍塌，但由于某种原因从顶部我有余量。

我认为是因为我在css元素中选择了inherit。但这表示我对页面有默认边距。请帮助理解。

Answer 1

由于似乎没有人正确解释这一点，我会为您尝试。

css 中的inherit 关键字意味着您直接从它的父级继承样式。由于您已将所有 div 设置为继承其边距，因此它们将从其直接父级继承该属性。

最终的 div(嵌套在 #my 中的 div)将从 #my div 继承。 - 由于您没有为顶部和底部设置任何边距，这也将保持继承状态。

这意味着 #my div 将从它的父级(即 body 标签。

body 标签有 8px 的边距(取决于你使用的浏览器——我用的是 chrome)所以它被所有的 div 继承，这就是为什么你在顶部有 8px 的边距内部分区如果您不想在最后一个 div 上留边距，您可以完全删除边距属性，或者将其设置为 0 而不是继承。

总结一下，内部 div 继承自名为 my 的父级 div，后者又继承自父级 body 标签，该标签设置为 8px(或浏览器默认值)，因此您的边距来自您的 body 标签。

有关 css inherit 的更多信息