Why is the height of li larger than the height of the image inside it?

Question

On hovering a top level li element of my navigation bar,

I see that small space beneath the image inside the li element

This bugs me when I don't define a background color for my li element because we can see that the menu subitem below seems not linked to the li element.

By using Chrome's debugger, I found that the heights of the li and img elements are different :

this screenshot shows the height of the li element and the image inside it

I tried to find any default padding or margin values put on the li element but could not find any so I have no other clue where that space come from.

Please note that I have disable the spacing of my UL with this css code :

nav ul {
    list-style: none;
    margin: 0;
    padding: 0px;
}

Can you explain why this space is present and tell how to remove that unwanted space [on the li element]?

Do a `margin: 0 !important` on the `li` element itself to ensure that the margins are not being generated or overridden elsewhere. — Tyler Roper, Oct 06 '16 at 20:58

score 1 · Accepted Answer · answered Oct 06 '16 at 21:10

1

It's because images are inline elements, to fix this add display: block; to the image then use margin: 0 auto; to center it inside the li.

answered Oct 06 '16 at 21:10

dahliacreative

441
3
14

This solution actually works! It didn't work the first time because I forgot to set the next image as a block element so my ul was still encompassing the 2nd li which was still 55px high. The margin modification is not required to remove the whitespace though. Thanks Simon! Nice answer! – Jonathan Dinh Oct 07 '16 at 16:47

score 0 · Answer 2 · edited May 23 '17 at 12:19

Having done research, I found out that this space is actually a whitespace added after every inline-block elements that have spacing characters between them (e.g carriage return, TAB, space).

By removing these spacing characters in my HTML, I was able to remove the unwanted space.

This post on StackOverflow is a good start point to understand the issue and to learn about the different techniques to fix it: Unwanted margin in inline-block list items [duplicate]

Why is the height of li larger than the height of the image inside it?

2 Answers2