一、提出问题

在浏览器中,图片有一个下间隙问题,有人也称之为图片3像素BUG
1.这并不是什么浏览器bug,而只是英文字母书写时有个基线的问题,基线决定了图片的对其方式。这才是造成浏览器中图片下间隙的本质。 那么,什么是基线?
我们小时候学英文,
一开始都是用的四线本写英文字母,就是那个长的跟五线谱一样的本,4条线。其中第3条线就是基线,此线是绝大多数比较矮的字母的脚部对齐的线。
比如a、z、x,这些短小一点的字母,它们的是以第3条线作为字母底部的对齐线的。
但有的字母比较“高大”,比如g,y,它们的尾巴就会伸到第4条线上。
同理,在网页上显示字符,也有一个基线存在,并且这个基线也是以英文4线普的对齐理论来对齐的 2.这个下间隙也并不是固定的3像素,而是变化的。 
知道了基线的概念,我们就知道了,像“g”这样比较高的字母,它探出基线之下的内容占多少像素,其实是跟当前元素设置的字号大小有关的。 而图片在网页中默认的展示样式是inline-block的,所以它的对齐方式就跟文本一样,要跟基线对齐,这样就产生了图片与容器的下间隙。
由于浏览器默认文字的字号是14px(有的是默认16px),所以就造成了默认的3像素的下间隙。
但其实我们已经知道了,如果当前容器设置的字号远远大于16px,那么这个下间隙将大于3像素。

二、解决办法

去除图片下间隙的办法有很多,常用的有3种
(1)设置父盒子字号为0  比如:
.box{
font-size: 0;
} (2)改变图片的display  
.box img{
display: block;
} (3)给图片设置垂直对齐方式
.box img{
virtical-align: middle;//设置为任意值都可以
}

来源:https://www.cnblogs.com/ldq678/category/1324993.html

图片三像素问题如何解决css的更多相关文章

  1. 解决CSS图片底部3像素问题总结

    解决三像素问题的总结: 1.img标签的父标签增加font-size:0; 如.body{ font-size: 0; } 2.img标签增加display:block; img{display:bl ...

  2. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  3. div里嵌套了img底部会有白块问题和图片一像素问题解决

    div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...

  4. 用Delphi直接获取bmp图片的像素

    用Delphi直接获取bmp图片的像素,并存储显示出.(此像素主要用在LED上显示).希望高手能给出代码啊!! function getImagePixels(f: string): Integer; ...

  5. 利用IIS部署WEB网站以及解决CSS/JS不能显示问题

    利用IIS部署WEB网站以及解决CSS/JS不能显示问题 转载声明:http://blog.sina.com.cn/s/blog_a001e5980101b4kt.html vs中正常IIS发布网站后 ...

  6. WPF图片放大后模糊的解决方法

    原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...

  7. python网络爬虫之解析网页的BeautifulSoup(爬取电影图片)[三]

    目录 前言 一.BeautifulSoup的基本语法 二.爬取网页图片 扩展学习 后记 前言 本章同样是解析一个网页的结构信息 在上章内容中(python网络爬虫之解析网页的正则表达式(爬取4k动漫图 ...

  8. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  9. 用canvas 实现个图片三角化(LOW POLY)效果

    之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2 ...

  10. 怎么用一行代码解决CSS各种IE各种兼容问题

    用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题. 在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整.现在百度与谷歌都有了一行解决这种兼容性的代码了 ...

随机推荐

  1. 从5个函数带你理解K8s DeltaFIFO

    摘要:DeltaFIFO是K8s中用来存储处理数据的Queue,相较于传统的FIFO,它不仅仅存储了数据保证了先进先出,而且存储有K8s资源对象的类型.是连接Reflector(生产者)和indexe ...

  2. PPT 商务图表的应用和美化之道

    PPT 商务图表的应用和美化之道 折线图 饼图 你认为的图表元素,可能是图表外的元素 https://www.bilibili.com/video/BV1ha411g7f5/?p=11

  3. 使用 BLIP-2 零样本“图生文”

    本文将介绍来自 Salesforce 研究院的 BLIP-2 模型,它支持一整套最先进的视觉语言模型,且已集成入 Transformers. 我们将向你展示如何将其用于图像字幕生成.有提示图像字幕生成 ...

  4. Rocketmq学习2——Rocketmq消息过滤&事务消息&延迟消息原理源码浅析

    系列文章目录和关于我 零丶引入 在<Rocketmq学习1--Rocketmq架构&消息存储&刷盘机制>中我们学习了rocketmq的架构,以及消息存储设计,在此消息存储设 ...

  5. 你真的了解token续期嘛?

    Spring Boot + Vue中的Token续签机制 在现代的全栈应用开发中,Spring Boot作为后端框架和Vue.js作为前端框架的组合非常流行.在这种架构中实现Token续签是保障应用安 ...

  6. JS 实现 HashMap

    HashMap代码(这种实现方式是错误的,错误原因:代码中_map._length变量是HashMap的所有实例共用的): /** * HashMap * 2021年09月09日 */ (functi ...

  7. 如何在Windows中使用Telnet客户端

    Telnet协议的解释 Telnet( TE终端NET工作的缩写)是一种网络协议,用于提供与设备通信的命令行界面 . Telnet最常用于远程管理,但有时也用于某些设备的初始设置,尤其是交换机 ,接入 ...

  8. Educational Codeforces Round 109 (Rated for Div. 2) 个人补题记录(A~D,AB思维,C模拟构造,D题DP)

    补题链接:Here 1525A. Potion-making (思维 [题意描述] 作为一个魔法师,现在我想配置一杯药物浓度为 \(k\%\) 的药水, 每次操作能进行添加: 一升水 一升药物精华 作 ...

  9. 供应链安全情报 | cURL最新远程堆溢出漏洞复现与修复建议

    漏洞概述 cURL 是一个支持多种网络协议的开源项目,被广泛集成到自动化构建.网络测试.网络数据采集以及其他网络相关的任务中,备受开发者和系统管理员青睐. cURL在2023年10月11日下午紧急发布 ...

  10. WIN32 动态 UAC 提权

    UAC(User Account Control) 是 Windows 平台的用户权限控制.它可以让程序使用管理员权限执行某些操作. 静态 UAC 提权 静态 UAC 提权让程序一直运行在管理员权限下 ...