如何使用CSS删除图像下的“a”空间？

Question

我正在尝试学习CSS的基础知识，但我仍有一些问题 如何在img下隐藏这个“a”空间？
我给它一个红色背景，以便更容易解释我正在谈论的部分。

问题在于：

http://jsfiddle.net/3c48P/7/

.feedEkList li a {
background: red;
}

这是CSS，但我无法隐藏它（我想保留img）

Answer 1

尝试显示：阻止图像：

http://jsfiddle.net/3c48P/9/

.feedEkList li a img
{
    display:block;

}

Answer 2

问题是，您的<a>和<img>都是内联元素，因此在显示期间会保留空格。

但是，您将它们视为块级元素，并期望它们不包含此类空格。

最简单的（不深入其他问题）是同时制作<a>标签和<img>标签display: block（尽管唾液指出img单独标签就足够了。

Answer 3

只需添加此行display:block;即可。它将解决您的问题，因为img默认显示在行中 像这样添加css

 img {
    width:100%;
    height: auto;
    display: block; 
    }

Answer 4

img元素是“内联”，就像文本一样。这个空格是保持字母下降部分的线条的一部分（例如j或g），图像的垂直对齐设置在线条的“基线”处，大多数字母的底部都在其中（abcd） ）。

正如所指出的，一个选项是显示块，尽管它是默认的“内联”显示。您也可以避免将“vertical-align”更改为“bottom”。