CSS Padding overflowing on hover of fixed height div - html

Question

I'm working on a site and I added previous and next buttons to my posts which I'm creating via a wordpress theme. For some reason on the hover stage of these blocked elements which are links the padding pushes beyond the max height and I can't figure out how to correct this problem. If you take a look at the link
http://hearthable.com/hearthstone-account-wipe/
At the end of the post content you will see Previous Post and Next Post. If you hover over either one you'll see the issue with the padding. I've been trying everything and haven't been able to figure out to not get the hover to flow over.
Thanks

Answer 1

Two different solutions:
Use box-sizing: border-box:
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 85px;
-webkit-box-sizing: border-box; /* Some Webkit versions requires a prefix */
-moz-box-sizing: border-box; /* Gecko (i.e. FireFox) requires a prefix */
box-sizing: border-box;
}
Compability tables are available here.
You can read more about CSS3 box-sizing at MDN, QuirksMode or other good places. Avoid W3Schools like the plague.
Calculate the height as height = desiredHeight - border - padding.
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px; // 85px - 20px padding
}
Finally, you can drop the height: 85px from #browse-posts a:hover, it is inherited anyway.

Answer 2

if you have used padding, along with it you should do something else to make the element fits to its original height.
example
div{width: 100px;}
div:hover{padding-left: 5px;}
in this case on hover effect you have added padding left, which makes the div body a 5px margin. in this case the div occupies its original width along with the 5px padding. in order to get rid from this problem.. you can reduce the width to 5px.
then your code will be..
div{width: 100px;}
div:hover{padding-left:5px; width:95px;}
do the same in your code.. you can find your own solution to your problem.

Answer 3

Simply reduce the height of the <a> to 65px
CSS
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px;
}
#browse-posts a:hover{
background: #cccccc;
}

Answer 4

Padding, by default, pushes the boundaries of an element outwards. This is a result of something called the box model. The box model defines the way that the width and height of a element is calculated (basically, which properties will contribute or not contribute to this calculation).
In your case, the padding on the <a> element extends outwards past the edge of the container. It's not noticeable normally because the element has no background, but on hover you add one, allowing you to see the true size of the shape.
You can fix this in one of two ways (plus more that I'm not mentioning.. CSS is pretty versatile!):
First of all, you can change the box model to something that will take padding into consideration on the overall size of the element:
box-sizing: border-box;
You will need to use vendor prefixes for this property, like so:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
(note that this needs to be applied to #browse-posts a)
Alternatively, you can simply hide the issue using overflow: hidden; which will not fix the padding from extending outwards, but it will not be visible
This would go on #browse-posts
I hope that helps you. Also, just for future reference, when posting a question it is always a good idea to post some of your source code so that people can easily find the areas that need to be looked at, rather than just a site link.
Cheers!