如何消除内联块图像下方不需要的空间？

如何消除内联块图像下方不需要的空间

使用内联块图像时，您可能会遇到存在额外空间的问题图像底部与其包装之间的空间。这是内联元素默认的垂直对齐方式造成的。

解决方案：使用垂直对齐方式

要去掉不需要的空间，需要设置垂直对齐方式对于图像。这可以使用垂直对齐属性来完成。通过指定vertical-align:top，图像将与包装器的顶部对齐，消除多余的空间。

示例：

添加以下样式你的 CSS:

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

演示:

你可以在这个 JSFiddle 上看到一个工作示例：http://jsfiddle.net/dJVxb/4/。更新后的 CSS 删除了不需要的空间，并将图像与包装器的顶部对齐。

以上是如何消除内联块图像下方不需要的空间？的详细内容。更多信息请关注PHP中文网其他相关文章！