Question

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

但我试着玩它，改变了一些东西。现在代码如下：

＆＃13;

 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;
    }

＆＃13;

<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>

＆＃13;

我看到的是一个大红色块内的一个大蓝块。蓝色区块的左侧和右侧坍塌到红色区块的边界，但是由于某种原因，从顶部我有边缘。

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

Answer 1

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

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

最后一个div（嵌套在#my内的div）将继承自#my div。 - 由于您没有为顶部和底部设置任何边距，因此这也将保留为继承。

这意味着#my div将从其父级继承顶部和底部边距（左侧和右侧已设置，因此不会继承），即body标记。

body标签有8px的边距（取决于您使用的浏览器 - 我使用chrome）所以这是所有div继承的，这就是为什么你在内部div的顶部有8px的边距。如果你想在最后一个div上没有保证金，你可以完全删除保证金属性，或者只是将其设置为0而不是继承。

总结内部div继承自名为my的父div，后者继承自父体标签，设置为8px（或浏览器默认值），因此您的边距来自您的身体标签。

有关css inherit

的更多信息

Answer 2

body的{{1}}标记的默认保证金由于明确写入规则8px而附加到您的子div上。您必须将保证金格式margin: inherit更改为inherit或将其删除，以便子元素不会有奇怪的（默认）边距。

＆＃13;

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

＆＃13;

Answer 3

身体上有一个默认的边距，在你的情况下也会继承（margin: inherit），你可以像这样重置它：

html,
body {
  margin: 0;
}

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>

Answer 4

W3C学校对inherit

的解释

inherit关键字指定属性应继承其值来自其父元素。

在您的代码中，您继承了ALL DIV的margin属性。

id为“my”的div：从身体（边距为8px）继承边距上下边距，左右都设置。

没有id的div：从div＃id（总是8px）继承上边距和下边距，从div＃id（0％= 0px）继承左边和右边。

为了更好地理解我为body添加了不同的边距，并在div＃my上设置了左/右边距。

body {
  margin:50px;
  background-color:yellow;
}

div#my {
        border: 8px solid black;
        margin-left: 5px;
        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>

来自上边距的空间来自哪里？

4 个答案: