How to Eliminate Unwanted Space Below Inline-Block Images?

How to Eliminate Unwanted Space Below Inline-Block Images

When using inline-block images, you may encounter an issue where there is extra space between the bottom of the image and its wrapper. This is caused by the default vertical alignment for inline elements.

Solution: Use Vertical Alignment

To get rid of the unwanted space, you need to set the vertical alignment for the image. This can be done using the vertical-align property. By specifying vertical-align:top, the image will be aligned to the top of the wrapper, eliminating the extra space.

Example:

Add the following style to your CSS:

<code class="css">img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}</code>

Demo:

You can see a working example at this JSFiddle: http://jsfiddle.net/dJVxb/4/. The updated CSS removes the unwanted space and aligns the image to the top of the wrapper.

The above is the detailed content of How to Eliminate Unwanted Space Below Inline-Block Images?. For more information, please follow other related articles on the PHP Chinese website!