Question

我正在尝试将top-margin提供给id=footer的div。但它不起作用而是高度增加了外部div。 HTML文件：

<div id="lowestContainer">
    <div class="middle" id="footer">
        <address id="addressSFCM">
            xxxxx-xxxx-xxxxx-xxxx<br/>
            xx--xx--xx--xx<br/>
            xxx---xxx-x--x-xx-xx<br/>
            Email:xxxxx@hotmail.com
        </address>
    </div>
</div>

Css文件：

#lowestContainer{
    background-color: rgba(18,19,20,1);
    height: 300px;
    z-index: 1000;
    box-shadow: 1px 0px 3px rgb(0,0,0,0.3);
}
#footer{
    width:1000px;
    height:100px;
    display:block;
}
#addressSFCM{
    color: rgba(76,76,76,1);
    max-width: 220px;
    height:auto;
    /*margin-top: 30px;*/
    display:inline;
}

请帮我解决这个问题;

Answer 1

更新您的页脚类，如下所示。

#footer{
width:1000px;
height:100px;
display:inline-block;
margin-top:100px;
text-align:center;
}

DEMO

Answer 2

另一种方法是将padding-top添加到lowestContainer，产生相同的结果

See this fiddle

#lowestContainer{
    padding-top:30px;
}

Answer 3

将overflow: hidden添加到包装器

<强> DEMO

#lowestContainer{
  overflow: hidden;
}
#footer{
    margin-top: 50px; // add top margin as per needed
}

最高保证金不起作用而是增加了高度

3 个答案: