为什么子元素不会相对于父元素使用保证金

我在<div>元素中为子元素<p>提供了保证金，但它正在移动div元素本身。我想把这个段落降低到任意值。我知道我们可以为父元素提供填充，但是它呢？为什么子元素不会相对于父元素使用保证金

在这里，以此示例代码...尝试更改.square p保证金属性。

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} .square p { 
 
    margin: 50px auto; 
 
}

<div class="square"><p>Hi</p></div>

它不应该是相对父元素？

来源

2016-09-01 Abhishek Pathak

这里的问题是亲子margin collapsing。要解决这个问题的方法之一是使用overflow: hidden

* { 
 
    margin: 20px auto; 
 
    box-sizing: border-box; 
 
} 
 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
    overflow: hidden; 
 
} 
 
.square p { 
 
    margin: 50px auto; 
 
}

<div class="square"> 
 
    <p>Hi</p> 
 
</div>

来源

2016-09-01 10:23:33

p是block元素，这是正常现象为母体square过。

尝试inline-block显示p标记，您可以调整相对父项的边距。如果您想保留p作为block，您应该为父母提供overflow: hidden。

示例使用inline-block：

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} .square p { 
 
    margin: 50px auto; 
 
    display: inline-block; 
 
}

<div class="square"><p>Hi</p></div>

来源

2016-09-01 10:24:08 kukkuz

是的，这工作。但为什么我们需要修复，这是W3C必须考虑的事情。无论如何，边缘折叠有什么好处？ –

我不是专家。 @NenadVracar应该知道它。 :) – kukkuz

你应该给display:inline-block;财产儿童p。

*{ 
 
    margin: 20px auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f56; 
 
} 
 
.square p { 
 
    margin: 50px auto; 
 
    display: inline-block; 
 
}

<div class="square"><p>Hi</p></div>

来源

2016-09-01 10:27:06 Trix

为什么子元素不会相对于父元素使用保证金

回答

相关问题