Menu
Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.
The reason behind your issue is that you did not specify the width of the container but, in the same time, you set a width: 100%; for the image.
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.
img {
vertical-align: middle;
}
jsFiddle: http://jsfiddle.net/fRpK6/1/
I often solve this by giving the image element display:block or display:inline-block as appropriate.
it is solved my problem.
line-height: 0;
I believe setting
line-height: 1;
on the image will also fix this problem, especially if it's in a block by itself.
apply display: block to the image fix it, i have this issue with images inside floated divs.
I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;
.placeholder {
font-size: 0px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With