为什么我的div的margin受内容/块INSIDE的影响？ [英] Why are my div's margin affected by content/blocks INSIDE of it?

问题描述

我有以下：

<div>
    <p>some content</p>
</div>

或：

<div>
    some content
</div>

没有：

<p>some content</p> 

... div的位置不同。它看起来好像块内容INSIDE在div正在影响div的外部（顶部）边距。那么div是否被下推？我会认为div内的内容，像一个块不会影响包含块的边缘。为什么div的边缘受到其内部的内容的影响？

...the div's positioning is different. It appears as though block content INSIDE the div is affecting the div's outer (top) margin. So is the div pushed down? I would think that content inside the div, like a block would not affect the containing block's margin. Why is the margin of the div affected by the content inside of it?

推荐答案

您正在谈论覆盖边距。

查看： http://jsfiddle.net/thirtydot/vgJxX/

您可以通过添加到父元素修复它：

You can "fix it" by adding to the parent element:

• A border li>
  
• 一些填充。


• position：absolute 。

• A border.
• Some padding.
• position: absolute.
• float: left.

HTML ：

<div>
    <p>I'm doing the "broken" thing you hate.</p>
</div>

<div id="d2">
    <p>I'm not!</p>
</div>

<div id="d3">
    <p>Neither am I!</p>
</div>

<div id="d4">
    <p>Me neither!</p>
</div>

CSS：

div {
    background: #ccc
}
p {
    margin: 20px 0
}

#d2 {
    border: 1px solid red
}

#d3 {
    padding: 1px
}

#d4 {
    position: absolute;
    bottom: 0;
    width: 100%
}

这篇关于为什么我的div的margin受内容/块INSIDE的影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！