CSS图片下方带有4px间隙解决方法

最新推荐文章于 2025-09-12 09:46:00 发布
原创 最新推荐文章于 2025-09-12 09:46:00 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决图片下方出现空白的三种方法：通过设置display属性、调整父元素的font-size或使用浮动并配合绝对定位，帮助解决网页布局中常见的图片底部空白问题。

第一种方法: 设置img的display:block;

第二种方法. 设置img 父元素的 font-size: 0px;

第三种方法: 设置img浮动,如果你的父元素是有img撑起来的,这个时候会导致,父元素没高度, 可以给父元素添加 绝对定位;

解决图片下间隙等一些自带的小问题
weixin_58139900的博客
10-04 214
目录 图片下间隙问题 ie8-图片边框问题 文本框和按钮对不齐现象 ie6下小高度问题 浮动双边距问题 图片下间隙问题 现象：图片和包裹它的盒子下边框有一个默认的间隙 原因:图片具有文本的特性(基线对齐特性底边相当于文本的基线！图片间隙=文本的基线与 底线之间的距离) 解决办法: 1.图片转换为块元素display:block 2.图片的垂直对齐方式vertical-ali...
CSS实战与技巧———7. 清除图片下方间隙（vertical-align: top； border: none）
weixin_63215361的博客
02-05 473
div class=“box”>标签并没有设置高度，所以高度应该由 img图片撑开，但结果并不是box高度完美贴合图片而是略大于图片存在间隙，再举个例子加以说明，观察Y 和 y,为什么y可以贴合边框，而图片和 Y没有贴合边框。/*取消图片边框*/
img 下方的4px像素问题
dibengshao7358的博客
12-11 255
问题：在一个div块里面放了一个图片，图片下面有内容，可以不管怎么调试，在火狐浏览器，IE6下。图片img底部多出了4个像素 解决：img样式中 vertical-align: top/middle/bottom; 如果外面有div包裹最好加 overflow : hidden; 转载于:https://www.cnblogs.com/andy-lehhaxm/p...
盒子的高度比图片多4px问题
jhfvuyhgui的博客
03-31 571
盒子的高度比图片多4px问题 如图所示 这里我给图片设置了高度等于200px，图片在网页中的高度也是200px，没有问题。 但是当我检查box盒子时，发下box盒子的高度是204px，比图片的高度多出了4px； 在查阅资料后发现这里是因为img标签是行内标签，而行内标签默认的是基线对齐而不是底线对齐，如图所示：会给英文字母预留下4px的高度。这就导致图片下方多出了4px，从而导致盒子的高度多出4px。 解决方法： 1.把img标签转换为块元素，因为块元素默认是底线对齐，就不会出现这个问题； 2.给img
IE6下div图片下边4px空隙bug的解决办法
07-12 164
IE6下图片下边有空隙的解决方法网上已经有很多种解决办法了，我今天同大家一起复习一下那些办法，并提供一些新的方法供大家参考。 下面请先看一下出现问题的代码： IE注释bug #all { float:left; padding:10px 30px; font-size:12px; color:#FFF; background-color:#CCC; } #sub { fl...
inline-block元素4px空白间距清除方案
aliven1的博客
04-03 420
css中图片四像素问题
m0_37058714的博客
06-19 1965
<body> <div> <img src="./images/1.jpg" alt=""> </div> </body>小编在这里添加了一张图片。当检查时发现div的高度为304px,然而img的高度为300px;如下图：这就是图片四像素的问题。那为什么img会少4个像素呢？接下来给大家讲解一下四
如何在VSCode中使用HTML和CSS实现两张图片并排显示于同一行，均有对齐且居中，第一张图片下方附带文字'家庭医生'，第二张图片下方为'诊疗记录'，点击后能跳转到另一个页面？同时，请提供相应的HTML和CSS代码示例。
12-22
/* 间隙 */ cursor: pointer; } .text { margin-top: 10px; font-size: 14px; color: #666; } ``` 在这个例子中，`.container` 使用了 Flexbox 布局，使得图片并排居中对齐。`img` 标签设置了点击事件 `...
CSS基础教程（四十六）响应式 Web 设计之图片：别让图片搞砸你的网站！CSS响应式图片的“魔法”全揭秘，让你的设计自适应到飞起！
最新发布
jxf_jxfcsdn的博客
09-12 798
在多屏时代，你的网站图片是否还在用“生掰硬拽”的方式适配不同设备？加载巨图耗流量，小图放大又模糊，用户体验直接崩盘！本文将带你深度剖析CSS响应式图片的核心秘籍。从最基础的max-width: 100%，到精准高效的srcset和sizes属性，再到性能利器<picture>元素的艺术指导，我们逐一解锁。最后，还将奉上结合现代CSS布局（如Grid和Flexbox）的完整示例，让你彻底掌握如何让图片在不同屏幕下自动“变形”，实现丝滑渲染与性能飙升！
一篇博文带你0基础 Html和css入门
贪吃ღ大魔王
05-28 1120
前端初学入门，找不到学习方向，不喜欢记笔记？没关系，这篇博文为你整理了详细的学习笔记汇总，欢迎收藏，喜欢的可以直接到博文尾处，免费下载md笔记哦~⭐⭐⭐ # Html5 网站: 1、网站的建立流程???? 注册域名 租用空间 网站建设 确定网站的主题 搜索资料 规划网站 制作页面 4.网站的推广 5.网站的维护 2、网页的组成及web标准???? 结构：网页的结构部分 xhtml或html 表现：网页的样式css 行为：网页要实现的功能JS HTML 超文本标记语言 XHTML 可扩
解决table的宽高总是比td大4px的溢出问题
EGeek
02-10 930
问题：已知table的margin=0、border=0、padding=0，但table做的背景溢出，如下图。 问题定位：通过Chrome的代码检测发现table中border-pacing默认为2px，如下图。 解决方法：css代码修改table的border-pacing为0px，如下图。 结果：table的背景未溢出，如下图。 原理分析 border-spacing是表格的边框间距...
li列表设置了行高，但每行后面都有4px的空白间隙
swallowliyan的专栏
02-28 2695
相信大家经常用到ul li来制作信息列表，今天有一个同事问我一个这样的问题”li列表设置了行高，但每行后面都有4px的空白间隙“。n年前，我也曾遇到过这样的问题，今天就把它记录下来吧。 ul li {clear:both;overflow:hidden;height:32px;line-height:32px;background: url(../images/arrow.png) left
div里包含img底部多出3px的解决办法
weixin_34115824的博客
05-11 190
如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？问题图：解决后的效果：这个Bug真是十分有意思，不过有N多种解决办法！1、设置div{ font-size: 0}2、设置img{ display: block}3、设置img{ vertical-align:t...
HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。
热门推荐
weixin_42868605的博客
06-01 4万+
今天在学习 做实例的时候 发现 img 标签里面的图片不显示， 结果是路径的问题，在这写下 路径的正确写法，方便以后查阅， 路径用 \ 或者 / 表示， 但是最后 图片名的时候 必须用 / 还有 路径前面的 两个点 不能漏掉 人生就像一只储蓄罐,你投入的每一分努力,都会在未来的某一天,回馈于你。而你所要做的,就是每天多努力一点. ...
移动端---img标签设置了宽高但是src不给路径会出现边框，怎么去掉边框呢
beautifultian的博客
11-01 2804
今天做移动端的时候遇到这个问题: img标签设置了宽高，但是src先不给路径的时候出现了边框，如图： 我发现一个不错的方法，可以去掉img边框，如下： html: css: .selectPhoto img[src = ""]{ opacity:0; } 实现效果如下：
img标签不给src就出现边框，解决办法
qq_48306453的博客
11-07 1918
.<img/>在src没有给或加载失败，浏览器会自动给img加上边框。 如下图这样 html： <imgclass="tis"src=""alt=""> css： #nav-txt3.nav-img1.nav-img2.tis{ width:75px; height:75px; background:url(../images/icon.png)no-repeat; backgrou...
多个img标签之间有几px间隙的解决方法
my466879168的博客
03-10 548
img标签之间的空隙解决办法 原因：是因为inline-block所导致的，下篇文章详细讲述下 在多个img标签一样排列的时候中间会有一些间隙 如下所示： 解决办法： 多个img标签写在同一行上 <div id="app"> <img src="./1.jpg" alt=""><img src="./2.jpg" alt=""><img src="....
CSS图片下方4px间距
qq_40147756的博客
10-31 227
css 图片下方4px间距问题
a标签中使用img后的高度多了4px
溪水博客
03-27 1443
在某个项目中，发现a标签中使用img后的高度多了4px，各种样式调整，查阅资料，最终解决此问题。由于img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘。将displayp设置为block即可消除4px的bug。其实解决方法不止一种：1.将图像定义成    img:{display:block;}2.给父级设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值