Why Does an Inline-Block Image Have Unwanted Space Below It?

Eliminating Unwanted Space Below Inline-Block Image

In web development, achieving a seamlessly positioned inline-block image within a wrapper can be challenging. Sometimes, a gap appears beneath the image, leaving an unsightly aesthetic. This issue arises from the default behavior of inline-block elements, which inherently reserve space below them.

Underlying Mechanism

The root cause lies in the CSS box model. An inline-block element, such as an image, forms a rectangular box that includes content, padding, border, and margin. By default, when an inline-block element contains an empty line after it, the browser interprets this as a newline and creates a corresponding gap in the layout.

Solution: Vertical Alignment

To remove the unwanted space, it is necessary to modify the vertical alignment of the image. By setting the CSS property vertical-align to top, the image will be aligned to the top edge of the inline-block container, eliminating the gap.

CSS Code:

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

Example:

Consider the following HTML and CSS:

<code class="html"><div id="wrapper">
    <img src="image.jpg">
</div></code>

<code class="css">#wrapper {
    background:green;
}

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

Outcome:

By applying the vertical-align property, the image will now fit snugly within the wrapper, with no visible space beneath it.

The above is the detailed content of Why Does an Inline-Block Image Have Unwanted Space Below It?. For more information, please follow other related articles on the PHP Chinese website!