html - HTML 行高不需要的间隙

Question

line-height 会导致图像和其他元素之间出现间隙，但是将其值更改为 0 会使任何文本都无法阅读，是否有任何简单的解决方法？

想象一些可重复的 DOM 元素，如阴影，你将如何消除这个元素与上面的任何东西（可能是图像、div、span、按钮、表单）之间的差距？

为这个 .shadow 设置类并将其 line-height 设置为 0 当然不起作用，因为 line-height 的工作方式有点不同。

我制作了 3 张图片，第一张显示了我在说什么，第二张修复了它，第三张显示了第二张实际上如何破坏了整个布局：

我正在考虑类似的事情：

body {
   line-height: 0;
}

p {
   line-height: 1.2em;
}

但是我想这有点冒险，如果有一些自由文本不在里面怎么办

标签？

score 4 · Accepted Answer

不要乱用line-height属性，并设置display:block在图像上。

#example1, #example2, #example3 {
    width: 200px;
    float: left;
}
img {
    display:block;
}

1 回答 1