html div设置有空隙,如何解决img标签下面的小空隙

原标题：如何解决img标签下面的小空隙

很多初学小伙伴在写页面的时候碰到过一个问题，当我们用一个div直接包裹img，img的下方会出现3px间距，如图

代码：

.box {

border: 2px solid red;

}

那原因是什么呢？

img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符(匿名文本)，导致下方会多出来 3px 间距，其实我们在img右侧添加一个span包裹住文本，现象会更明显

有五个办法可以解决以上问题

第一种方法：

给div设置和img一样的高度；

缺点：该方法不够灵活，一旦img尺寸改变，我们要重新设置div的高度

第二种方法：

给img设置vertical-align为除baseline以外的值，常用

第三种方法：

给img添加display:block;

这个方法是我们比较常用，但需要注意，img一旦设置为块，text-align:center；就不再生效，图片的水平居中应使用margin:auto;

第四种方法：

给img设置浮动

设置浮动会让img脱离文档流

缺点：父元素高度不会被img自动撑开

第五种方法：

给div设置font-size:0;

缺点：该方法会使div中的文字消失

根据实际情况选择合适的方法；让我的女神更完美！

责任编辑：

html div设置有空隙,如何解决img标签下面的小空隙相关推荐

css img 适配尺寸_如何解决img标签下面的小空隙（附详细视频教程）
很多初学小伙伴留言说在写页面的时候碰到过这样的问题,用一个div直接包裹img时,img的下方会出现3px间距,像这样: 那其实解决起来也很简单的,刚接触的伙伴,不清楚这点也很正常. 代码: < ...
img 居中_解决img标签下方出现的小空隙
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图代码: <!DOCTYPE html> <html><h ...
safari打不开cookies_safari cookie设置中文失败的解决方法
释放双眼,带上耳机,听听看~! IOS中safari cookie设置中文失败的解决方法,大家了解吗?当我们在IOS开发这个功能的时候,也许会遇到很多的问题,今天就跟着技术狗小编的步伐来了解吧! 一开 ...
html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
这次给大家带来DIV设置width后超出父元素应该如何解决,解决DIV设置width后超出父元素的注意事项有哪些,下面就是实战案例,一起来看一下. 前言本文介绍的是利用CSS3的新属性box-siz ...
HTML里子DIV设置margin-top后影响父DIV位置的解决办法
在HTML里,子DIV元素设置了margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置. 一.编写代码. <!DOCTYPE html> <html ...
HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客原文: HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客版权声明:本文为博主原创文章,未经博 ...
div设置float后下一个div要换行的解决办法
div设置float之后,如果没有清除,则下一个被设置float的div会根据上一个float的div的布局进行排版:而下一个没设置float属性的div则是根据它的前一个元素进行排版. 要清除flo ...
span之间的空隙怎样解决？
span之间的空隙怎样解决? 一.问题描述二.分析原因三.解决办法 1.使用float:left 2.使用margin-right 3.使用letter-spacing 属性和word-spaci ...
html宽度自适应怎么调整li超出隐藏,HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法...
方法一: div 自适应宽度很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了方法二: div ul li 嵌套后解决高度自适应办法: html代码如下 ...
设置背景图片，解决手机上背景图片高度适应问题
设置背景图片,解决手机上背景图片高度适应问题第一种方法:直接对图片进行设置,代码如下 <img src="url" class="PhoneBack"& ...

html div设置有空隙,如何解决img标签下面的小空隙

html div设置有空隙,如何解决img标签下面的小空隙相关推荐

最新文章

热门文章