ctdinh ctdinh - 2 months ago 6
CSS Question

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

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]?

Answer

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.