Question

我试图理解为什么删除HTML图形标记下面的空格需要黑客攻击。

在Chrome中，删除默认的“vertical-align：baseline”可以正常工作，但是当您在CSS中添加它时，它不会。我唯一能够让它工作的黑客就是在图像周围添加一个包装div，然后设置“line-height：0”。

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://wellnesscounselingmilwaukee.com/wp-content/uploads/2015/07/4-Nature-Wallpapers-2014-1.jpg">
    </div>
</figure>

有什么想法吗？根本没有任何意义。

以下是来自JSFiddle的屏幕截图，供那些无法复制的人使用。我在最新版本的Chrome和Safari上测试了这个。这与表格完全相同，人们通常会使用不同的黑客。屏幕截图没有显示我取消选中的部分“line-height：0;”顺便提一下，如果你想知道。如果您将代码复制并粘贴到JSFiddle中，则必须取消选中它才能看到问题。

这是您不必修改的链接。

https://jsfiddle.net/415s3amz/1/

更新

如果您可以选择将图像设置为display：block;它也将解决这个问题。如果没有，请使用line-height：0;这似乎已经基于测试证明了这与图像元素的默认行为有关。但是，取消选中vertical-align：baseline仍然没有意义，但添加相同的CSS不起作用。

Answer 1

您需要将图像的垂直对齐方式从基线（默认值）更改为顶部：

img {
  vertical-align: top
}

<强> jsFiddle example 内联元素为文本下延（字符线g，y，j下面的字符）留出空间，因此如果你想摆脱这个间隙，你需要改变垂直对齐。

Answer 2

margin:0应删除默认边距。 <figure>标记取其中div的大小，这是一个块级元素，因此在空时扩展全宽。请参阅代码段... figure和div都具有相同的尺寸（容器宽度，高度150）

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>

在figure

下方没有显示空格的其他代码段

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>
<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>

Answer 3

来自MDN的引用可能有助于澄清一些事情（我加粗了重要部分）：

HTML元素代表自包含的内容，经常使用caption（），并且通常被引用作为一个单位。虽然它与主流有关，但其位置独立于主流。通常这是一个图像，一个插图，图表，代码片段或模式在正文中引用，但可以移动到另一个页面或到附录而不影响主流。

通常当项目从正常的布局流程中取出时，它们的行为会有所不同（例如使用position: absolute等），这就是为什么我认为使用margin: 0;不起作用（至少不是所有浏览器）。删除边距似乎在Firefox中有效。

当我在Chrome中查看代码时，我会看到它的CSS：

figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

因此，将这些值设置为0会删除Chrome的边距。

至少暂时在IE it seems there is only partial support：

部分支持是指在技术上缺少默认样式 元素被视为“未知”。这很容易解决手动设置每个标签的默认显示值。

希望这会有所帮助。 You can see my js.fiddle here

删除HTML下的空间图标记与图像

3 个答案: