效果图
html
css
6条回答 默认 最新
LRolinx 2019-12-06 15:11关注把img的内嵌样式float:left;去掉，img的display:block默认就是块元素，默认就是靠左上角，再加个浮动左就会打破元素布局
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报
分享
- 2025-10-23 16:56读忆的博客 比如明明没给元素设置 margin、padding，图片和 div 换行后中间却莫名出现一段空白高度，用浏览器开发者工具检查样式也找不到明显异常。这种隐藏的布局间隙不仅影响页面美观，还可能打乱整体排版逻辑。今天就来深入...
- 2019-03-10 12:48巧克力很苦的博客 在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决...
- 2018-12-04 10:53陌、小默的博客 div盒子和img之间有空隙之前也遇到过几次这问题，今天又遇到了特地来总结下。 先上代码和效果图： <!doctype html> <html lang="en"> <head> <meta...
- 2019-09-13 21:03chouwang7599的博客 div 中 存在 img标签，由于img标签的display:inline-block属性。 display:inline-block布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一 行以保持代码的...
- 2019-01-25 14:33qing_小诺的博客 由于img标签是行内标签，display:inline-block布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑...
- 2024-05-15 14:50小鱼小鱼干的博客 img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符(匿名文本)，...当我们用一个div直接包裹img，img的下方会出现3px间距，如图。缺点：该方法不够灵活，一旦img尺寸改变，我们要重新设置div的高度。
- 2021-02-27 11:12知乎生活的博客 本文向大家介绍如何解决div里面img图片下方有空白的问题。首先看代码：#wrapper {border: 1px solid red;width:200px;}img {width:200px;} 运行结果为：上面代码中，div下面有一小段空白间隙，图像之下的间隙或多余...
- 2024-12-23 10:15坦笑&&life的博客 两个img之间为什么会有空隙及解决方法
- 2024-06-05 09:20Serendipity︎的博客 由于img标签是行内标签，display:inline-block布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑...
- 2023-03-13 20:05Aduck.的博客 也就是行内块元素，凡是带有inline属性的都具有文字类特性，为了正确显示带有尾巴（比如 j、q、y 等）英文字母，就在下方留了一些空白的地方。该方法不够灵活，一旦 img 尺寸改变，我们要重新设置 div 的高度。将 ...
- 没有解决我的问题, 去提问
