0

I have an image of 24x24 px inside an <a>, which is nested in a <div> having min-height:50px.

The bottom and top paddings of <a> element are 13px both.

So, height should be 24px(image height) + 13px(<a> padding-top) + 13px(<a> padding-bottom) = 50px right?

The problem is that the wrapper <div> is expanding its height to 54px, except when I define the vertical-align:middle for that image, then It's resized to 50px as desired.

Here is the code http://codepen.io/thyagosic/pen/JKYrjN

Removing the vertical-align: middle; may help to understand the problem

Saurabh Bayani
  • 3,350
  • 2
  • 25
  • 44
Thyago Campos
  • 5
  • 3
  • 1
    Are you looking for an explanation as to why using `vertical-align: middle` (instead of `vertical-align: baseline`) leads to a different height? – Marc Audet Jun 07 '16 at 13:57

2 Answers2

0

I recommend putting images inside of links into divs (or setting display: block to the element)

<div class="menu">
  <a href="#">
    <div id="image"> 
      <img src="http://xamlspy.com/Media/Default/Logo/XamlSpy.24x24.white.png" alt="" />
    </div>
  </a>
</div>

Also padding/margin should be set for "block" elements

Igor L.
  • 3,159
  • 7
  • 40
  • 61
0

All images are inline elements by default and they have 4px space at the bottom. You should set 'vertical-align:top' or 'display: block' on them to remove this space.

sgromskiy
  • 300
  • 1
  • 4