为什么我的图片底部有填充？

Question

为什么我的图片底部有填充？

7

我将使用这个CSS/HTML组合来模拟一个双栏布局：

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="two-cols">
    <div class="left-col">
        <img src="http://stott.customer.netspace.net.au/images/aurora2.jpg" alt="Image"/>
    </div>
    <div class="right-col">
        Text
    </div>
</div>
</body>
</html>

CSS

.two-cols {
    border: 1px solid black;
    display: table;
    width: 100%;
}

.left-col, .right-col {
    display: table-cell;
    width: 50%;
}

img {
    width: 300px;
    height: 200px;
    padding: 0;
    margin: 0;
}

请点击这里查看JSBin。

但是我的图片底部有不必要的填充：

Result

有什么想法为什么会出现这种情况，如何摆脱它？

- TheFooProgrammer

1

文本默认具有填充...您可以通过向div添加line-height:11px;来删除填充。 - Ladineko

5个回答

4

我曾经遇到过同样的问题。在HTML邮件中也会出现这个问题。只需将图片设置为display:block即可，不需要设置line-height。

img{
  display: block;
 }

- Lilly Karak

3

Add line-height:0

.left-col, .right-col {
    display: table-cell;
    width: 50%; 
  line-height:0
}

演示

但是当您在多行中添加更多文本时，这会使line-height:0。因此，我建议您使用display:inline-block而不是display:table-cell。

.left-col { width: 50%; vertical-align:top; display:inline-block; line-height:0;}
.right-col { width: 50%;  display:inline-block; vertical-align:bottom}

DEMO 2

- Sowmya

谢谢，但是为什么我在开头得到了那个填充/空间？ - TheFooProgrammer

@AspiringAqib 最佳答案？更像是最差的答案。如果文本有多行呢？ - Gumbo

@Gumbo，我已经更新了那个答案。顺便说一下，那是针对第一次提出的现有要求给出的。其中有一些逻辑是有意义的。 - Sowmya

@Gumbo 给出了用户想要的答案，同时证明了他拥有丰富的知识！ - Muhammad Talha Akbar

0

在React和Emotion CSS中：

<img
  css={css`
    display: flex;
  `}
  ...
/>

- SIMMORSAL

0

你可以输入

img{
   vertical-align:middle;
}

- nagiyevel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gumbo · Accepted Answer

默认的vertical-align是应用于img的基线对齐方式，将其设置为bottom即可解决:

img {
    vertical-align: bottom;
}