资讯专栏INFORMATION COLUMN

解决img(行级标签)下边距的问题

Labradors / 1053人阅读

摘要:问题描述如下图,如果标签下跟一个块级标签,那么两者之间会出现一条缝隙。原因原因是行级标签具有自身的定位,图片默认的垂直对齐方式是基线解决方案如下图,将图片转成块级元素即可。解决方案如下图,更改图片的对齐方式为。

问题描述:

如下图,如果img标签下跟一个块级标签,那么两者之间会出现一条缝隙。

原因:

原因是行级标签具有自身的定位,图片默认的垂直对齐方式是基线(vertical-align: baseline)

解决方案1:

如下图,将图片转成块级元素即可(display: block)。

解决方案2:

如下图,更改图片的对齐方式为top(vertical-align: top)。

本文完。

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

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

相关文章

  • 解决img行级标签下边距的问题

    摘要:问题描述如下图,如果标签下跟一个块级标签,那么两者之间会出现一条缝隙。原因原因是行级标签具有自身的定位,图片默认的垂直对齐方式是基线解决方案如下图,将图片转成块级元素即可。解决方案如下图,更改图片的对齐方式为。 问题描述: 如下图,如果img标签下跟一个块级标签,那么两者之间会出现一条缝隙。showImg(https://segmentfault.com/img/bVbiWYn?w=1...

    Bmob 评论0 收藏0
  • 为什么有些内联(行内)元素可以设置宽高?

    摘要:宋体块级元素主要有宋体宋体内联元素不会以新行开始,和相邻的内联元素在同一行。也就是说,绝对定位或者浮动的内联元素,实际表现为块级元素,可以设置宽高和边距。为什么有些内联(行内)元素如img、input可以设置宽高? 在说明之前我们先来了解一些定义。 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示。 宽度(width)、高度(height)、...

    netScorpion 评论0 收藏0
  • 前端知识归纳

    摘要:继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中,在垂直方向上的会发生重叠。 技能考察: 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    sixleaves 评论0 收藏0
  • 前端知识归纳

    摘要:继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中,在垂直方向上的会发生重叠。 技能考察: 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    NotFound 评论0 收藏0

发表评论

0条评论

Labradors

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<