Question

我似乎无法理解img标签在html页面中与文本一起表现的方式。

我已经删除了边距和填充，但在img或其他一些意外行为下似乎总有一些额外的空间。我确信使用绝对定位或负边距的快速CSS解决方法，但我正在寻找更通用的解决方案。

问题：有人可以解释img标记的定位方式，具体说明为什么它们会与文本一起垂直偏移？

Answer 1

CSS有两种display:属性：block和inline。

内联就像文字一样。它流淌，包裹在盒子的末端，就像那样。

块很粗糙，有边距，填充和宽度（计算或导出）。

它没有多大意义，但<img>实际上是一个内联元素，以及<a>, <abbr>和其他许多元素。发生的事情是图像实际上被渲染大致相当于字母，它恰好不是12pt高，但可能是130px或任何你的图像。这就是它坚持的原因。

声明<img style="display:block;" src="image.png" />使其表现得像大多数人认为的那样。

Answer 2

如果希望 <img>为内联元素，则可以使用vertical-align CSS属性指定图像相对于文本行的对齐方式它出现在。This page的“内联元素上的垂直对齐”标题下有例子。

Answer 3

让文本环绕图像的关键是设置float属性，如下所示：

img {
float:left;
display:block;
}

Answer 4

你在img下看到的是像g或j这样的字形的后代部分所需的空间。图像的行为就像一个字母，而就位于基线上。

img
{
    display: block;
}

会为你解决。

一种可能会有所启发的经验：

<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p>

将<em>视为~128px的高图像（如果1em是16px）。

Answer 5

IMG个元素就像任何其他内联元素一样定位。

Answer 6

如果想要更好地控制图像定位，请将图像包装在DIV中并控制DIV的位置。如果要将div与文本混合，可以浮动div。

Answer 7

这可能与此特定情况无关（希望以前答案的建议可以解决您的问题），但如果您发现元素周围会出现意外的额外空间，请确保已删除默认值浏览器经常添加到元素中的填充，边距等（当然，不同的浏览器通常会添加不同数量的填充，边距等。

如果您确保使用

将边距和填充等归零

body { margin: 0; padding: 0; border: 0; }

在CSS开始时，您可以添加任何填充和边距等，而不必担心浏览器的默认值会导致任何意外空格，并且希望浏览器之间的不一致性更少。