Here are two screenshots showing the issue I am facing:
You can see that the image has a height of 202px, but the li has a height of 208px
Where does the li get the extra 4 pixels of height from and how can I fix it?
Asked
Active
Viewed 705 times
0
-
Show the code, you probably have some margin or padding set to 3px for top and bottom – Tdelang Jul 31 '13 at 11:11
-
That's really hard to tell without the HTML/CSS source. – acme Jul 31 '13 at 11:12
-
can be also a whitespace inside the li or something. – MightyPork Jul 31 '13 at 11:13
-
This could be caused by space after `
` tag. Try write `
-
It's difficult for me to show the source since it's a drupal site running on my localhost. I can assure you that there is absolutely no whitespace in the li though (I had a similar issue that was caused by that). I have tried to make a cut down version of it in a static html file but for some reason the issue doesn't happen then. – Cameron Ball Jul 31 '13 at 11:14
3 Answers
1
I think you lis have display: inline-block set and that there are line breaks in your source code.
Try :
<li><img... /></li><li><img... /></li>
instead of
<li>
<img... />
</li>
<li>
<img... />
</li>
Or for readability
<li><!-- HTML COMMENT : no line break
--><img... /><!--
--></li>
<li><!--
--><img... /><!--
--></li>
Not so readable after all... ;-)
Armel Larcier
- 15,747
- 7
- 68
- 89
0
You must have some margin or padding remaining on your <li> set margin-top, margin-bottom and padding to 0 (or with negative size) on your elements. It can also due to the spaces in html tag (see comments on your post)
Give use a fiddle or the example, it's easier to help you with it.
Maxime Lorant
- 34,607
- 19
- 87
- 97
-
As you see in Developer Tools - there is no margin / padding for top or bottom of li... – Setthase Jul 31 '13 at 11:15
-
The browser can add it by default. Never used Chrome Developper Tools but I guess it doesn't show default values. – Maxime Lorant Jul 31 '13 at 11:15
