Html 顶部边距不工作，而高度增加

我正试图用

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>

---

请帮我解决这个问题

更新页脚类，如下所示

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

---

另一种选择是在最下面的容器中添加填充顶部，从而产生相同的结果

---

将

溢出：隐藏
添加到包装器


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

好的，但我需要一个原因来解释它为什么不起作用。据我的理解，边距不会影响孩子相对于父母的位置，除非父母有填充（我的解决方案证明了这一点）阅读更多关于盒子模型的内容：（见8.3.1）但有时它适用于向左或向右浮动的元素。执行此操作后，页脚不会保留在中心？？不明白你在说哪一个。class=middle属性包含
左边距：auto；右边距：
property.updated my answer。使用
text align:center
thnxx它可以工作！！但是，当您试图将
top
margin
应用于内部
div
时，为什么您能解释一下原因呢？它实际上就像将top margin应用于父级
div
即
#lowerstcontainer
一样。这就是为什么当您将边距应用于内部
div
时，主包装器
div
向下移动的原因。然后
溢出：隐藏
在这里是如何起作用的，我还看到它有时对子div正常工作，为什么我们知道在应用
溢出：隐藏
之后，内容已剪裁
。因此，它允许在这里将
上边距
应用于内部
div
。应用
overflow:hidden'后，
top-margin`应用于
internal-div'，主包装是
clipped`。
#lowestContainer{
    padding-top:30px;
}

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