Html 添加到父DIV的子元素上的边距 我试图让H2出现在div的一半（也就是说，它垂直出现在图像中间），但是，当我把一个边缘顶部添加到H2时，它似乎也添加到div中。

问题是什么？解决方案是什么

<div>
    <div class="container">
        <style type="text/css" scoped>
            .container {
                background-image: url("http://lorempixel.com/500/250/business/");
                background-repeat: no-repeat; 
            }
            h2 { margin-top: 200px;}
        </style>
        <h2>Heading</h2>
        <p>Description</p>
    </div>
</div>

.集装箱{
背景图像：url（“http://lorempixel.com/500/250/business/");
背景重复：无重复；
}
h2{页边距顶部：200px；}
标题
描述

问题在于利润率是：

相互接触的不同元素上的垂直边距（因此 没有内容、填充或分隔它们的边框）将崩溃， 形成一个等于相邻边界中较大者的单个边界 利润。这不会发生在水平边距上（左侧和右侧）， 仅垂直（顶部和底部）

不是黑客攻击的最佳解决方案是将

margin

更改为

padding

，并重置默认的h2

margin top

：

h2 { padding-top: 200px; margin-top:0;}

如果填充不合适，有其他一些可能的解决方案来防止默认崩溃：

• .container{边框：1px实心透明}

• .container{padding:1px}

• h2{显示：内联块；}

你说你希望：

使H2显示在DIV的一半

最好使用百分比来支持不同的容器大小。考虑这样做：

.container{
背景图像：url（“http://lorempixel.com/500/250/business/");
背景重复：无重复；
高度：250px；
位置：相对位置；
}
.下去{
最高：50%；
位置：绝对位置；
}
.下h2{
保证金：0；
}

标题
描述