CODEWITHSUNDEEP
css
Code
Code

Reputation: 83

Box-sizing refuse to work properly

I have some simple html structure :

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

And i applied to the section a box-sizing:border-box; also I gave the ancor a hover state that increase the padding,something like :

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

But unespectly the section increase size.If i aply box sizing the padding should go inside and this thing doesn't happen.Can you take a look at my Fiddle

Upvotes: 0

Views: 43

Answers (1)

Derek
Derek

Reputation: 3435

You need to set a fixed height on the section. Otherwise, there is no overflow; the section will grow to fit the content.

Upvotes: 1

Related Questions