框的高度忽略儿童填充框

Question

我有填充和容器的问题。

.box {
    border: 1px solid black;
}

a {
    background-color: green;
    padding: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box">
    <span class="link">
        <a href="#"><span>Hello!</span></a>
    </span>
</div>

当内容有填充时，容器会忽略填充的高度。 在该示例中，可以看到跨度“链接”未在容器的边缘绘制。

我该如何解决问题？

JSFiddle

谢谢！

Answer 1

因为a是内联元素，所以你必须给它一个display：block。 也许您会看一些关于HTML元素如何工作的教程！

Answer 2

添加

a {
    display: block;
}

http://jsfiddle.net/rxjwcdyp/5/