div中img有空白的处理

最新推荐文章于 2024-09-03 09:49:02 发布
原创 最新推荐文章于 2024-09-03 09:49:02 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#line-height0 #空白

本文介绍了两种确保图片正确显示的方法：一种是在图片标签内设置display属性为block；另一种是将外层div的line-height属性设为0px（适用于非IE6、7浏览器）。这两种方法有助于改善网页布局，使图片能够更好地融入页面设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.：在img标签上添加display：block

 

     <div >

             <img  src="http://banner.png"   style="display：block;" >

     </div>

 

 

2：在外层div添加 line-height:0px;（ie6，7不起作用，需要使用display：block）

html的div上下有空白,在不设置border 时这个外层div 上下为什么出现空白？
weixin_35793018的博客
06-18 739
(图1)div.wrap 上下出现一段空白，浏览器窗口的滚动条滚到下面可以看到下面也有一条等长的空白，似乎与顶栏高度相同。在设置border 之后可以消除(图2)，加上box-sizing:border-box可以去掉浏览器滚动条。怀疑跟wrap 内部的子元素有关。初学者，为了实现效果一边搜一边做，混用了一堆东西~页面代码如下：DocTalkTITLE TEXT 标题栏JIFJRIJFIJRIJF...
div中img图片下方空白问题，div高度不等于img图片的高度，会留出几个像素
love2016hy的博客
11-08 4026
在div中加入img图片时会发现div的高度并不等于img图片的高度，借用一下小米的logo做了一下测试，代码简单明了，请继续往下看： html> div class="wrap"> img src="https://m.mi.com//component/header/img/logo_121d4a6.png" alt="logo"> div> br>
img在div里面会有空白产生如何解决
a648797721的博客
03-21 347
可以在img中添加样式：display:block或者vertical-align:bottom(推荐) 原因：因为img默认是按基线（baseline）对齐的 转载于:https://www.cnblogs.com/xuyuanlu/p/8616562.html...
两个DIV中间有空隙_不紧靠,白色缝隙,ie6中的3像素bug
weixin_34194702的博客
11-30 808
好不容易，今天找到了个关于DIV+CSS的教程，本来想学着做下拉框的，可是，下拉框，虽然，DIV可以做一点，但是还是要通过JS来调节。哎，看来，还得学JS。真是盐城网站优化学无止尽啊。还好，在DIV+css里，学到了一点东西，了解到了。IE6中的3像素BUG，什么叫，3像素BUG呢。就是，当浮动元素和非浮动元素相邻时，也可以称作为两DIV，一个浮动，一个不浮动的时候，他们...
div嵌套img，去除img下的小空隙
html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...
09-03 360
img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符(匿名文本)，导致下方会多出来 3px 间距，其实我们在img右侧添加一个span包裹住文本，现象会更明显。这个方法是我们比较常用，但需要注意，img一旦设置为块，text-align:center；2：给img设置vertical-align为除baseline以外的值，常用。缺点：该方法不够灵活，一旦img尺寸改变，我们要重新设置div的高度。缺点：父元素高度不会被img自动撑开。缺点：该方法会使div中的文字消失。
div嵌套img时多出空白的原因及解决办法
qq_43650979的博客
03-10 914
div嵌套img时多出的空白的原因及解决办法 产生空白的原因 img标签的display属性默认是inline，而对应的vertical-align属性的默认值是baseline。所以就会出现图片底部出现一片空白区域的现象。关于vertical-align:baseline 解决办法 1、div{ font-size: 0} 2、img{ display: block} 3、img{ vertic...
div嵌套 img 空白解决方法
09-25
标题提到的“div嵌套img空白解决方法”就是针对这个问题提供的一种解决方案。 首先，我们需要理解为什么会出现这样的空白。`img`元素在HTML中是行内元素（inline element），这意味着它在默认情况下与其他行内元素...
去除div中img元素四周的白边问题：
qq_41571838的博客
10-15 3975
去除div中img元素四周的白边问题： 原图如下：可以发现图片周围有一圈白色边框(不确定是什么但像是边框)； 在做了如下尝试后均无果： 1）img在div中的白边就是因为inline-block；造成的， 所以此时将img的display设置为block；白边就消失了 2)vertical-align:top | bottom | middle 3）...... 我的如下： 原理：1. 把图片拉大一点超出父盒子，然后超出的部分隐藏;(解决了右边和下边) 2. 设...
div中有个img和另一个div标签，让这两个标签左右居中展示
02-19
嗯，用户之前问过关于Chrome浏览器中设置极小字体的问题，现在又转向了如何让div内的img和另一个div左右居中。看起来用户可能在开发网页时遇到了布局问题，需要调整元素的水平对齐。 首先，用户的需求是让两个子...
解决div里面img图片下方有空白的问题
刘运召的博客
03-02 2564
# 产生空白的原因 img标签是行内块元素即默认是：display: inline-block，且行内块元素的默认对齐方式是基线对齐即vertical-align: baseline 所以产生空白的原因是因图片底边与容器基线对齐了，留出了基线与底线的空白 # 解决空白方法 <div class="pic-container"> <img class="pic"...
<img>元素底部为何有空白？
不怕不聪明，只怕聪明的人比我努力
01-26 782
要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念： 可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。 对比一下 vertical-align 的另外两个常见值，top 和 bottom
IE中img标签多出5px的空白之4种解决方法
风的专栏
11-22 2605
今天我们在网页布局的时候，会发现IE中img样式会多出5px的空白，那怎么办呢？下面给出4中解决办法： 工具/原料 包含img标签的任意源代码片段 代码编辑器 方法/步骤 解决方法1: 设置 img 的 vertical-align: bottom; ul{
html图片左侧留白,HTML+CSS布局img图片元素出现空白的问题
weixin_35859336的博客
06-02 2245
在进行页面的 HTML+CSS 排版时，遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素 img 下出现多余空白的问题绝对是常见的，对于该问题的解决方法也是“见机行事”，根据原因的不同要用不同的解决方法，这里把解决直接把解决 image 图片布局下边的多余空隙的 BUG 的常用方法归纳，供大家参考。1、将图片转换为块级对象即，设置img为：display:block;在本例中添加一...
图片img底部出现空白边距
kaolagirl的博客
04-30 477
因为图片是行内元素，默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对齐方式导致图片并不是与div的真实底部对齐，而是与文基线对齐。文基线就是字母x的下边缘，即使没有文字，也会有空隙。2、给img（图片）设置vertical-align: bottom;1、给img（图片）设置display: block;
div 空隙的解决办法
lxdhwz的博客
04-05 1767
div 空隙的解决办法 div在用display: inline-block;时会出现莫名的空隙， 后来发现时标签后空格惹的祸 <style> * { margin: 0; padding: 0; } div { display: block; width: 100px; height: 100px;
div中的img标签多余空白bug解决方案
yCharlee的博客
07-21 3165
上传图片之前： 上图之前之后： 原图是这样的： 发现区别了吧，这里用到了css3的object-fit属性（保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。） 呃，其实我想说的重点是div中的img标签多余空白bug解决方案。 在做项目的时候，遇到这样的问题： 呵嘿，上面有个白条对吧
img css 上面间隙,CSS 解决img底部空白间隙
weixin_28952093的博客
08-03 457
前言img一直以来有一个很大的问题就是底部空白间隙，一直以为是img默认样式造成的，后来查了相关的资料，才弄清楚为什么会产生这样的结果。首先仔细看下图中的边框与img的间隙。img间隙用过ps文字工具的同学头知道，在使用文本工具中会出现如下的现象，字母或者汉字会超出那条基线。PS文字工具而在CSS中也有那条线，而且inline默认的垂直对齐方式vertical-align默认值是baseline(...
解决CSS下img图片多余空白Bug方案
08-18 336
　　1、将图片转换为块级对象 　　配置 img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 　　2、配置 图片的垂直对齐方式 　　配置 图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {ve...
<img>元素底部为何有空白及其解决方案
weixin_33704591的博客
03-07 725
一、为什么&lt;img&gt;元素底部会有空白？ 　　要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念。 　　vertical align的有效取值为baseline, sub, super, top, text-top, middle...
网页上下有空白区怎么处理
最新发布
03-08
嗯，用户问的是网页上下有空白区怎么处理。这个问题挺常见的，可能有很多原因导致。首先，我需要考虑用户可能的情况。他们可能是个刚学前端的新手，或者是有一定经验但遇到了特定问题。需要从基础开始分析，然后逐步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值