How to Remove White Space Below Inline-Block Images While Keeping them Embedded?

How to remove the white space between the bottom of the inline block image and the wrapper while keeping the image inline block

Used in CSS inline-block allows images to line up with text elements. However, in some cases, you will encounter the problem of white space between the bottom of the image and the wrapper. This may be due to the default vertical spacing the browser adds to inline block elements.

To solve this problem, you can set the vertical-align property to top. This sets the vertical alignment of the image to the top, eliminating white space.

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

After applying this style, the image will be aligned with the top of the wrapper and whitespace will be removed.

It is important to note that this solution does not work in all browsers. In some older browsers, it may be necessary to use other methods, such as wrapping the image in a span element and setting vertical-align: top for that element.

The above is the detailed content of How to Remove White Space Below Inline-Block Images While Keeping them Embedded?. For more information, please follow other related articles on the PHP Chinese website!