盒子含图片多出几像素高度的问题

最新推荐文章于 2022-05-07 22:50:24 发布
最新推荐文章于 2022-05-07 22:50:24 发布
阅读量996 收藏 1
点赞数 1
分类专栏： 前端 文章标签： img标签 img高度多出几像素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Speed_Pig/article/details/88366786
版权
本文探讨了在HTML中，当盒子包含图片时，盒子高度为何会比图片高度多出几像素的问题。该现象在不同HTML标准中普遍存在。解决方案包括设置img标签属性、调整父元素样式或改变图片元素的display属性。问题的根本原因是img元素下方的空白间距。
摘要由CSDN通过智能技术生成

问题

当一个盒子中含有一张图片，即使这个盒子(不管是块级元素还是行内块)没有设置高度，也会被内容撑起来等于图片的高度，但是事实并非如此。盒子的高度不等于图片的高度，而是多出了几像素，而这种问题出现在，html5、xhtml1.0 strict、xhtml1.1、html4.01 strict中。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta
最低0.47元/天 解锁文章
月光下的平方
关注
专栏目录
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
weixin_39721000的博客
06-04 727
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下，点越多、图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel)物理像素也叫设备像素(dp:device pixel)1.2逻辑像素pt: html css中的使用的单位像素px: 实际上指的是逻辑像素ptpx: photoshop测量中的但是实际上指的是物理像素, 物理像素即表示的是一个点,...
盒子装载图片时出现的盒子比图片实际偏高的问题
m0_51404378的博客
11-02 461
行内元素默认是以baseling对齐的 但是有时候这个设定值会有问题出现 比如设置图片加一个遮罩层的话，这时候就会出现图片不会和这个遮罩层完全重合的情况 如下图所示： 在这里 * { margin: 0; padding: 0; box-sizing: border-box; } .box { position: relative; width: 300p
img图片的父盒子比图片高5px的解决办法
我爱美女S的博客
04-11 590
简单粗暴： 盒子比图片高度多5px,那就设盒子字号为0，或图片底线对齐！
css 诡异的多出来的几像素
weixin_30362233的博客
09-28 178
可以设置display: block;/*用来去除div下边莫名多出来的3px的像padding-bottom的东西。*/vertical-align: middle; 亦可父元素font-size:0;line-height:0; 亦可 转载于:https://www.cnblogs.com/yufu/p/3998803.html...
html5 包含img的父级元素多出几像素的问题
anpeng5522的博客
11-23 197
解决方案： 　1.第一种方案：图块状显示; #box img {display:block;} 　　2.第二种方案：父级元素定义为img的宽和高 　　3.第三种方案：将支持 valign 特性的对象的内容与对象底端对齐，使用此方法，同样可以解决IE6在XHTML中的图片显示效果。 img{vertical-align:bottom;} 转载于:https://...
chrome/ie中图片底部多出几像素问题
weixin_30906185的博客
12-29 135
如果给图片的父元素设置背景色，则图片的底部就会多出几像素，chrome/IE/FF中均是如此，如下图： 代码如下，就是简单的div中放张图片： <!doctype html> <html> <head> <meta charset="utf-8"> <title>测试</title> <styl...
CSS盒子模型 图片演示
01-24
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上如何显示的关键概念。在CSS中，每个元素都可以被看作一个矩形的盒子，包含内容区、内边距、边框和外边距四部分，这四个...
设置一个高100px，宽100px的盒子背景图片在底部中间，大小为2像素高5像素宽
04-27
其中，`.box`是盒子的类名，`background-image`设置背景图片的地址，`background-repeat`指定不重复平铺，`background-position`指定图片放置在底部中间，`width`和`height`分别设置盒子的宽度和高度，`border`设置...
JS实现单张或多张图片持续无缝滚动的示例代码
11-20
想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。...
img图片下方几像素间距问题解决方法
weixin_51109349的博客
01-01 555
原因：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。 < img / > 标签插入一张图片，图片会有多余的下边距，如下图： ******外面盒子未设置具体高的情况 如果想让这条缝隙消失，那就可以给图片设置一个属性： vertical-align :top/bottom; 这样图片的下边距就会消失了。 注：为
html图片白边的解决方式
weixin_45576316的博客
04-19 3167
在日常的写html页面时，原生代码经常性的会引入图片，我们也经常性的会让图片宽度等于父盒子宽度的100%，高度自适应，但是此时会出现一个问题，图片下方总有撑开的一小部分，这里我将父盒子背景颜色改成黑色，以便观察 修改前的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&
html图片撑开盒子,css背景图撑开盒子高度
weixin_28841265的博客
06-05 2768
本文原地址需求：给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px问题：背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签...
html图片高度撑开,CSS背景图撑开盒子高度
weixin_32123093的博客
06-17 1417
需求：给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px问题：背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签插入这张图，...
css行高line-height的一些深入理解及应用
从入门到放弃
08-23 2385
一、前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，建议您看看。 这里，我也要讲讲我对line-height的一些理解，所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的，可以说是补充或是另外一个角度的思考。另外，将结合实际，展示line-height的一些特性和一些常见应用，帮助您对css行高line-height...
关于swiper内容高度超出一屏问题，及解决方式。
Yw_better的博客
09-07 9679
 原理：在内容位置区域，使用 e.stopPropagation();阻止事件冒泡（触发翻页），当滑动到顶部或者底部时，解除e.stopPropagation()。 .swiper-slide{ background-repeat: no-repeat; background-position: center center; background-size: 100%...
图片下方三像素原因及解决办法
weixin_44437258的博客
11-18 922
img标签在HTML5和HTML4.0.1的严格模式渲染的时候，下面会有几像素的空白，也就是常说的图片下方三像素的bug。 场景：一个div里面套一个图片，加一个遮罩层的效果就会显示这个问题。 原因：因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行符/空格间隙问题”。 解决办法 1.img标签的父标签增加font-size:0; body{ 　　　　font
CSS-父盒子不设置高度，其高度依靠某一个子盒子撑起来，其它子盒子的高度无法确定，但是里面的内容需要居中，怎么办？
ddddd3332134的博客
05-07 2648
先上代码： <div class="father"> <div class="left">右边盒子高度随着左边盒子高度而变化</div> <div class="right"></div> </div> 这里的父盒子不设置高度和宽度，两个子盒子只设置一个宽度： <style> .father { background-color: blue; } .left {
盒子模型背景图片设置
最新发布
12-01
1. 为元素设置宽度和高度，以便为背景图片提供空间。 2. 使用background-image属性设置要用作背景的图像的URL。 3. 使用background-repeat属性指定如何平铺背景图像。默认情况下，背景图像会在水平和垂直方向上平铺...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值