css - Box-sizing 拒绝正常工作

Question

我有一些简单的 html 结构:

<section>
  <a href="#">
    <img src="http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg"/>
    <h4>Something here</h4>
  </a>
</section>

然后我应用了一个 box-sizing:border-box;我还给 ancor 增加了填充的悬停状态，比如:

section a:hover{
  padding:5px 0px;
}

但不小心该部分增加了大小。如果我应用框大小填充应该进入内部并且这不会发生。你能看看我的Fiddle吗？

Answer 1

您需要在该部分上设置固定高度。否则，没有溢出；该部分将扩大以适应内容。