为什么我的ul底部没有边距？

Question

没有元素浮动，但只有底部边距显示在包含div之外。这是什么原因以及如何修复它以使边距在容器内的ul上？

http://jsfiddle.net/krcoxq0v/1/

HTML

<div class="box">
    <h2>Title</h2>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
</div>

CSS

div {
    background:#aaa;
    width:300px;
}
ul {
    margin:25px;
    padding:0;
    background:#ddd;
}
li {
    list-style:none;
}

Answer 1

将overflow:hidden;添加到顶级div

Demo Fiddle

div {
    background:#aaa;
    width:300px;
    display:block;
    overflow:hidden;
}
ul {
    margin:25px;
    padding:0;
    background:#ddd;
}
li {
    list-style:none;
}

这将强制执行block formatting context

  

块格式化上下文是a的可视CSS呈现的一部分   网页。它是块框布局的区域   并且漂浮物彼此相互作用。

Answer 2

在你的div css中添加overflow:hidden;。