上边距不起作用，而是增加了高度[重复]

Question

我试图用id=footer 将top-margin 分配给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

另一种方法是将 padding-top 添加到产生相同结果的最低容器中

See this fiddle

#lowestContainer{
    padding-top:30px;
}

Answer 2

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

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

DEMO

Answer 3

将overflow: hidden 添加到包装器

DEMO

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