为啥此代码中的图像下方有空格？ [复制]

Posted 2023-03-06

【中文标题】为啥此代码中的图像下方有空格？ [复制]

【英文标题】：Why is there space under the image in this code? [duplicate]为什么此代码中的图像下方有空格？ [复制]

【发布时间】：2013-03-25 15:41:59

【问题描述】：

我有以下代码，它允许红色从 a 元素中显示出来。为什么是这样。我原以为 a 元素只会扩展到内容的大小，但看起来它比这大一点。请在此处查看代码笔 http://codepen.io/anon/pen/soqEz。

HTML

<a href="#"><img src="http://placehold.it/150x150" /></a>

CSS

a
  background: red;
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;

img 
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;

编辑：我看到了下面的答案......但是任何人都可以解释 为什么 空间在那里（我的意思是考虑到它是一个块级元素......什么是首先是它的目的）......而不是试图摆脱它。谢谢

【问题讨论】：

鉴于您的问题编辑，@Quentin 和我本人在上述 cmets 中两个链接问题的接受答案中解释了原因。

谢谢，我会看看那些。

【参考方案1】：

img 元素默认为inline。 inline 元素充当文本并默认为 vertical-align: baseline。这意味着图像的底部与文本的底部对齐。请注意，小写的 p 或 g 低于垂直文本对齐的底部。您可以通过添加 vertical-align: bottom 或 display: block 来修复它。

【讨论】：

图片默认是inline-block，而不是inline。

@cimmanon 我的浏览器默认为inline。内联块的来源？

内联元素不支持边距、高度或宽度等属性，而 inline-* 元素支持。

@cimmanon - 不，它们是“替换内联”而不是“内联块”。 “inline-block”盒子的内部结构可以影响盒子的基线，“replaced inline”具有不透明的内部结构，但会尊重您提到的属性，类似于“inline-block”而不是“non-replaced内联”而不是。

例如在w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins 中，对于替换和非替换的内联框，宽度属性处理要求是非常不同的。

【参考方案2】：

在您的情况下，您需要添加显示：块，但添加到图像标签而不是链接标签。 添加

img

display:block;

【参考方案3】：

因为图像默认是inline 元素。将display: block 添加到您的img 规则并查看。

【参考方案4】：

这样做是因为它是一个内联元素。更改显示类型

img 
    display:block;