子元素上的边距移动父元素

时间 2020-02-13

标签元素边距移动栏目无线繁體版

原文原文链接

我有一个div （父），其中包含另外一个div （子）。 Parent是没有特殊CSS样式的body的第一个元素。当我设定 css

.child
{
    margin-top: 10px;
}

最终结果是个人孩子的顶部仍然与父母对齐。个人父母没有将孩子向下移动10px，而是将其向下移动10px。 html

个人DOCTYPE设置为XHTML Transitional 。浏览器

我在这里想念什么？ spa

编辑1
个人父母须要严格定义尺寸，由于它的背景必须从上到下显示（像素完美）。所以，在其上设置垂直边距是不可行的 。设计

编辑2
在FF，IE和CR上，此行为相同。 code

#1楼

我也遇到了这个问题，但更但愿防止出现负利润黑客攻击，所以我提出了 orm

<div class="supercontainer"></div> htm

周围都有填充而不是边距。固然，这意味着更多的神经，但这多是正确完成此操做的最干净的方法。对象

#2楼

这是正常现象（至少在浏览器实现中）。保证金不会影响孩子相对于其父对象的位置，除非父对象具备填充，在这种状况下，大多数浏览器会将孩子的保证金添加到父对象的填充中。 get

要得到所需的行为，您须要：

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

#3楼

的margin包含内的元件的.child正在崩溃。

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

在此示例中， p从浏览器默认样式接收margin 。浏览器的默认font-size一般font-size 。在#child上的margin-top超过#child您开始注意到它的位置移动。

#4楼

父元素至少不能为空，至少要放置  在子元素以前。

#5楼

在子元素中找到了替代项，并在DIV中留有边距您还能够添加：

.parent { overflow: auto; }

要么：

.parent { overflow: hidden; }

这样能够防止边距崩溃。边框和填充相同。所以，您还可使用如下内容来防止利润暴跌：

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

根据受欢迎的要求进行更新：页边空白的所有要点是处理文本内容。例如：

<style type="text/css">
    h1, h2, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<h1>Title!</h1>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
</div>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
    <ul>
        <li>list item</li>
    </ul>
</div>

因为浏览器会折叠边距，所以文本将如您指望的那样显示，而且<div>包装器标签不会影响边距。每一个元素确保其周围有间距，但间距不会加倍。 <h2>和<p>的边距不会累加，但会彼此滑动（折叠）。 <p>和<ul>元素<ul>发生一样的状况。

可悲的是，对于现代设计，当您明确想要一个容器时，这个想法可能会咬你。在CSS语言中，这称为新块格式化上下文。 overflow或保证金技巧将为您提供。