【问题标题】:Remove white space below image [duplicate]删除图像下方的空白[重复]
【发布时间】:2011-12-08 03:45:59
【问题描述】:

在 Firefox 中,只有我的视频缩略图会在我的图像底部和边框之间显示 2-3 像素的神秘空白(见下文)。

我在 Firebug 中尝试了所有我能想到的方法,但都没有成功。

我怎样才能删除这个空白?

【问题讨论】:

  • 这里是这个问题的简短而完整的答案:stackoverflow.com/a/31445364/3597276
  • 没有“display:block;”缺点的最简单的解决方案就是设置父元素的字体大小为0:

标签: css image whitespace border removing-whitespace


【解决方案1】:

您看到的是下行空间(挂在“y”和“p”底部的位),因为img 默认情况下是一个内联元素。这消除了差距:

.youtube-thumb img { display: block; }

【讨论】:

  • 有效,但效果不佳。我在一个 div 中有 4 张图像,我想要它们 text-align: center 这不适用于块。
  • 如果您需要图像与同一个盒子中的其他东西很好地搭配,请使用vertical-align: middle。在极少数情况下,该框包含几个小图像且没有文本,您可能需要在包含框上设置font-size: 0
  • 这行得通,但我使用了 Hasan Gürsoy 下面的另一个答案,因为他的答案不会导致 text-align:center 出现问题以及更改显示属性时发生的其他问题。
  • 它消除了间隙,但也使它成为一个块元素。远非假设更改显示类型不会对布局产生其他重大影响。
  • @NathanHornby 不需要假设,布局是有问题的(最初的代码也是如此)
【解决方案2】:

如果你不想修改阻塞模式,可以使用下面的代码:

img{vertical-align:text-bottom}

或者您可以按照 Stuart 的建议使用以下内容:

img{vertical-align:bottom}

【讨论】:

  • text-bottom 仍然在 Chrome 中的图像下方留下另一个像素。我建议vertical-align:bottom
  • 第一个提供此解决方案的人是 Dave Kok,如果您不计算我对已接受答案的评论(从一个月前开始)。
  • 这应该是公认的答案,因为它不会更改 img 标签的默认显示属性,稍后可能需要在其他地方“修复”!
  • Nvm,找到了为什么会这样:salman-w.blogspot.com/2012/10/…
  • 当图片特别小(比父块元素的 line-height 短)时,vertical-align:bottom 会在图片上方留下空隙。希望很明显这是预期的:developer.mozilla.org/en-US/docs/Web/CSS/line-height“在块级元素上,line-height CSS 属性指定元素内行框的最小高度。”
【解决方案3】:

如果您想将图像保留为内联图像,您可以在其上添加vertical-align: topvertical-align: bottom。默认情况下,它在基线上对齐,因此它下面的几个像素。

【讨论】:

  • 做得很好。您实际上还需要将图像设置为 inline-block 以使其在大多数浏览器中工作。
【解决方案4】:

我已经设置了一个JSFiddle 来测试这个问题的几种不同解决方案。基于[模糊]的标准

1) 最大的灵活性

2) 没有奇怪的行为

这里接受的答案

img { display: block; }

很多人推荐的(比如this excellent article),居然排在第四位。

一、二、三名都是这三个方案之间的折腾:

1)@Dave Kok 和@Hasan Gursoy 给出的解决方案:

img { vertical-align: top; } /* or bottom */

优点:

  • 所有显示值都适用于父级和 img。
  • 没有很奇怪的行为; img 的任何兄弟姐妹都会落在您期望的位置。
  • 非常高效。

缺点:

  • 在父节点和 img 都具有 `display: inline` 的 [完全有效] 情况下,此属性的值可以确定 img 父节点的位置(有点奇怪)。

2) 在父元素上设置font-size: 0;

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

由于这种 [种类] 在 img 上需要 vertical-align: top,因此这基本上是第一种解决方案的扩展。

优点:

  • 所有显示值都适用于父级和 img。
  • 没有很奇怪的行为; img 的任何兄弟姐妹都会落在您期望的位置。
  • 为 img 的任何同级修复了 inline whitespace problem
  • 虽然在 parent 和 img 都具有 `display: inline` 的情况下这仍然会移动 parent 的位置,但至少你不能再看到 parent。

缺点:

  • 效率较低的代码。
  • 这假定“正确”标记;如果 img 有文本节点兄弟,它们将不会显示。

3) 在父元素上设置line-height: 0

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

类似于第二个解决方案,为了使其完全灵活,它基本上成为第一个的扩展。

优点:

  • 在所有显示组合上的行为都与前两个解决方案类似,但父级和 img 具有 `display: inline` 时除外。

缺点:

  • 效率较低的代码。
  • 如果 parent 和 img 都具有 `display: inline`,我们会变得很疯狂。 (也许使用 `line-height` 属性并不是最好的主意...)

所以你有它。我希望这可以帮助一些可怜的人。

【讨论】:

    【解决方案5】:

    我发现了这个问题,但这里的解决方案都不适合我。我找到了另一种解决方案,可以消除 Chrome 中图像下方的空白。我不得不在我的 CSS 中的 img 选择器中添加 line-height:0;,图像下方的空白就消失了。

    这个问题在 2013 年的浏览器中仍然存在。

    【讨论】:

    • 是的,line-height: 0; 也对我有用。它在 2015 年仍然充满活力。
    • 这个“问题”仍然存在,因为它不是错误。这就是内联格式上下文的工作原理。
    【解决方案6】:

    有这个问题,如果您不想使用块,请在其他地方找到完美的解决方案,只需添加

    img { vertical-align: top }
    

    【讨论】:

      【解决方案7】:
      .youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
      

      【讨论】:

        【解决方案8】:

        给div的高度.youtube-thumb图片的高度。这应该在 Firefox 浏览器中设置问题。

        .youtube-thumb{ height: 106px }
        

        【讨论】:

          【解决方案9】:

          如前所述,图像被视为文本,所以底部是为了容纳那些讨厌的:“p,q,y,g,j”;最简单的解决方案是分配 img display:block;在你的 CSS 中。

          但这确实会抑制与文本一起流动的标准图像行为。保持这种行为并消除空间。我建议用这样的东西包装图像。

          <style>
              .imageHolder
              {
                  display: inline-block;
              }
              img.noSpace
              {
                  display: block;
              }
          </style>
          <div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>
          

          【讨论】:

            猜你喜欢
            • 2015-04-23
            • 2015-04-28
            • 2013-08-21
            • 2015-08-23
            • 2018-08-10
            • 1970-01-01
            • 2015-12-21
            • 1970-01-01
            相关资源
            最近更新 更多