img元素下有空白

Awbeci 发布于2019-08-28 18:25 / 3030人阅读

摘要：对比一下图片和右边的等字母，你会发现这三个字母的小尾巴和图片下方的空白一样高。要去掉空格可以使用或将标签变为块级元素。用这个试了下，果然有效。非常好的文章的应用元素应该是以及。如果应用在块级元素上，则会为其子元素应用该属性。

在做项目里一个页面的时候，要在页面底部放一张长条的图片，我就直接放了个图片在最下面，为其设置了

width: 100%

ftp 到服务器上去之后，以后就完工了，结果打开手机一看，（图片）下面有一条白边！！

各种尝试（比如外面套个 div 之类）无果，就上网查了下。正好 segmentFault 里有一个类似的问题为什么 div 里嵌套了 img 底部会有白块

这里有人解释了：

因为img默认是按基线(baseline)对齐的。对比一下图片和右边的 p, q, y 等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。

要去掉空格可以使用 vertical-align: bottom 或将 img 标签变为块级元素。

用这个 vertical-align 试了下，果然有效。

然后我就查了下这个 vertical-align 属性，结果发现它直接影响着元素在垂直方向上对位置，特别是对于图片。

查了 dash 文档里的 vertical-align，又链接到了这篇Understanding vertical-align, or "How (Not) To Vertically Center Content"。非常好的文章！

vertical-align 的应用元素应该是 table-cell 以及 inline-block 。如果应用在块级元素上，则会为其 inline-block 子元素应用该属性。

那如果真的想搞个垂直居中怎么办？文章还介绍了两种垂直居中的方法：

一种就是把父设为 relative，子设为 absolute 并且把子的 margin-top 设为负的自身一半高度（也就是说这里的子元素的高度是一个确定的值）。

还有一种是针对只有一行文本的情况，Set the line-height of the parent element to the fixed height you want.

GPU云服务器云服务器 img空白图片元素img 下有 linux下有qq吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111218.html

移动端H5页面注意事项

摘要：移动端活动页面常常需要能够分享到各种社交中，常用的有微信等。微信二维码问题同一个页面里要是有两个二维码，长按扫描总是只能扫出左侧第一个二维码。首发于简书博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶...

weknow619 2019-08-01 18:04 评论0 收藏0
移动端H5页面注意事项

摘要：移动端活动页面常常需要能够分享到各种社交中，常用的有微信等。微信二维码问题同一个页面里要是有两个二维码，长按扫描总是只能扫出左侧第一个二维码。首发于简书博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶...

madthumb 2019-08-29 13:53 评论0 收藏0
探究：绝对定位没有设置 top, right, bottom, left 的世界是怎样的？

摘要：一个元素如果设置了但没有设置此元素的位置在哪在涉及到绝对定位元素的位置问题时一个重要的概念是想要了解元素的位置还得找到此元素的才行如下是我进行的一系列测试以及对测试结果的试探性解释文中的英文术语都不翻译方便直接查或者其他技术文档请持有怀疑精一个元素如果设置了position: absolute;, 但没有设置top, right, bottom, left, 此元素的位置在哪? 在涉...

kbyyd24 2019-08-28 18:14 评论0 收藏0
多行文本溢出时出现省略号

摘要：多行文本溢出时出现省略号本文推荐种方法。溢出时不显示溢出的内容发生溢出时使用省略号代替浏览器的私有属性。显示指定的文本。显示多少行块级元素。默认显示的替代文本延迟多长时间后执行是否有窗口大小改变时执行默认操作具有这个类的元素。多行文本溢出时出现省略号本文推荐2种方法。 1. css tip：只兼容chrome内核的浏览器。ff不支持。 .box { overflow: hi...

王伟廷 2019-08-29 15:43 评论0 收藏0
div高度比包含的img元素高出3px的问题

摘要：问题描述写的时候遇到了一个小问题只包含一个元素，但是页面展示上却比高出一点。因此当我们的块级元素包含这个行内元素的时候底部就出现了的间距。问题描述写css的时候遇到了一个小问题div只包含一个img元素，但是页面展示上div却比img高出一点。当时只觉得匪夷所思...找了半天自己样式的问题...情况如下图 showImg(https://segmentfault.com/img/b...

newsning 2019-08-29 15:42 评论0 收藏0