Question

我正在使用某个网站，并在块元素中遇到一个奇怪的问题。将此图像放在块中时，将所有填充和边距设置为0，图像下方仍有空格。这是代码：

<section class="page-block">
    <div class="wrapper">
        <img src="http://navelpluisje.nl/theme/navelpluisje/images/ik.png"/>
    </div>
</section>


.page-block {
    position: relative;
    background: red;
    margin: 0;
    padding: 0;
}
.wrapper {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 0;
}
img {
    width: 200px;
    background: white;
}

我已经在问题上创建了jsFiddle。

我已经在Windows和osx上在几个浏览器上测试了它们，它们都有同样的问题。

有谁知道这是从哪里来的？

感谢名单

Answer 1

您需要设置垂直对齐顶部，如以下JSFIDDLE中所示。

img {
width: 200px;
background: white;
vertical-align:top;
}

说实话，我用以下SO Question找到了这个答案。这解释了以下内容：

默认情况下，图像以内嵌方式呈现，就像字母一样。它位于a，b，c和d所在的同一条线上。在f，j，p和q等字母上找到的下降线下方有一个空格。您可以调整图像的垂直对齐方式，将其放置在其他位置。

Answer 2

由img标记的默认显示属性（内联）引起。您可以将其更改为阻止以消除该空白区域

img {
 display: block; 
}

reference for inline-block

Answer 3

Use below CSS Code:

CSS

img {
width: 201px;
background: white;
/* height: 100%; */
vertical-align: bottom;
}

不知道填充/边距来自哪里

3 个答案: