css - 这是标准行为吗？ div从容器中流出

Question

这是标准 CSS 行为吗？

如何让容器环绕按钮？

http://jsfiddle.net/frank_o/yepw7oLw/

CSS:

.button {
    background: grey;
    padding: 10px 20px;
}
.test {
    border: 1px solid black;
}

HTML:

<div class="test">
    <a class="button">Test</a>
</div>

Answer 1

发生这种情况是因为您的 a.button 元素当前显示为 inline。应用于 inline 元素顶部和底部的 Margin 和 Padding 值不会影响其周围的元素，因为浏览器不希望影响流量。

要解决此问题，请将 display: inline-block 添加到 a.button 元素。

这将强制浏览器将其视为有关样式的所有规则的 block ，并将其视为内联以放置在页面上。