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;
}

但毫无疑问，该部分增加了大小。如果我应用盒子大小调整填充应该进入里面并且这件事不会发生。你能看看我的小提琴吗

Answer 1

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