html - 另一个 div 内的顶部到 div 的边距

Question

我有两个具有背景图像的 div，我想为第二个 div 添加边距，但它正在创建空白。

如何在将 div 保留在另一个 div 内的同时添加上边距？

<div class="background">
    <div class="logo">
    </div> 
</div>

.logo {
   background-image: url(image/logo2.png);
   height:40px;
   width:400px;
   margin-left:100px;
   display:block;
   margin-top:20px;
}

.background {
   background-image: url(image/empback.png);
   width:100%;
   height:94px;
   min-width:1345px;
}

Answer 1

您可以overflow: auto在父元素上使用

.background{
    background: #f00;
    width:100%;
    height:94px;
    min-width:1345px;
    overflow: auto;
}

演示

刚刚获得与此问题相关的共享链接。

---

position: absolute;此外，更好的方法是使用position: relative;with top、和properties代替使用left，这不仅可以使元素保持浮动，还可以避免将其他元素定位在同一块中。rightbottom

演示 2

Answer 2

您可以在这里使用css position财产。

示例代码

<div class="background">
    <div class="logo">
    </div> 
</div>

.logo
{
    background-image: url(image/logo2.png);
    height:40px;
    width:400px;
    margin-left:100px;
    display:block;
    position:absolute;
    top:20px;
}

.background
{
    background-image: url(image/empback.png);
    width:100%;
    height:94px;
    min-width:1345px;
    position:relative;
}

删除margin-top:20px;和添加position和top属性.logo。

Answer 3

只需通过代码。

通过改变position和top价值，我们可以得到结果。

.logo{
    position: relative;
    top: 10px;
    background-color: black;
    height: 40px;
    width: 400px;
    margin-left: 100px;
    display: block;
    margin-top: 20px;
}

.background{
     position: absolute;
     background-color: green;
     width: 100%;
     top: 50px;
     height: 94px;
     min-width: 1345px;
}

Answer 4

不改变位置并仍然得到想要的结果怎么样？

将此行添加到背景类：

.background{
    border-top: 1px solid transparent;
}