解决三像素问题的总结：

1.img标签的父标签增加font-size:0;

如、body{
　　　　font-size: 0;
　　}

2.img标签增加display:block;

img{
display:block;
}

3.img标签增加vertical-align: middle;

img{
vertical-align: middle;//或者vertical-align:top;
}

4.img标签增加float:left

img{
float:left;
}

为了更好地看效果，读者可以通过运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>三像素问题</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;

}
#box{
width: 500px;
margin: 0 auto;
}
/*解决三像素问题*/
/*//方法一
body{
font-size: 0;
}*/
/*//二
img{
display:block;
}*/
/*//方法三
img{
//vertical-align: top;//vertical-align: top|middle;都可以
vertical-align: middle;
}*/
//方法四
img{
/*float: left;*/
display: block;
}
</style>
</head>
<body>
<div id="box">
<img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
<img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
</div>
</body>
</html>

解决CSS图片底部3像素问题总结的更多相关文章

  1. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  2. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

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

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

  4. 记录利用CSS完美解决前端图片变形问题

    在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: <style type="text/ ...

  5. css line-height & 图片底部间隙的处理

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里 . line-height 的学习 line-heigh ...

  6. .Net给图片加水印，并解决“无法从带有索引像素格式的图像创建Graphics对象”问题

    using (Image img = Image.FromFile(savePath)) { //如果原图片是索引像素格式之列的,则需要转换 if (img.PixelFormat!=null) { ...

  7. img图片底部出现莫名的下边距问题

    谷歌中这样是解释的: 图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的.所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多. ...

  8. (转)解决png图片在IE6下不透明的方法

    来源于:http://xzl52199.blog.163.com/blog/static/95206446201142174540220/ 一.传统的JavaScript方法 思路: 1.一个专门解决 ...

  9. 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）

    今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...

随机推荐

  1. java注解优缺点

    优点: 1.节省配置,减少配置文件大小 2.编译时即可查看正确与否,提高效率 缺点: 1.增加了程序的耦合性,因为注解保存在class文件中,而且比较分散 2.若要对配置进行修改需要重新编译 @aut ...

  2. 使用ado.net打造通用的数据库操作类

    最近在项目中使用中碰到了这样一种情况,查询的数据是从Oracle中获取的,但是记录下来的数据是存在Sql Server中(企业Oracle数据库管理太严,没办法操作).而且我在之前的工作中也碰到过使用 ...

  3. tomcat启动报错 ERROR o.a.catalina.session.StandardManager 182 - Exception loading sessions from persiste

    系统:centos6.5 x86_64 jdk: 1.8.0_102 tomcat:8.0.37 tomcat 启动报错: ERROR o.a.catalina.session.StandardMan ...

  4. 今天刚用asp.net做的导出Eecel

    protected void daochu_Click(object sender, EventArgs e)        {                string hql = "s ...

  5. maven 跳过test

    -DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至target/test-classes下. -Dmaven.test.skip=true,不执行测试用例,也不编译测试 ...

  6. 了解的CAP和BASE等理论

    CAP,BASE和最终一致性是NoSQL数据库存在的三大基石.而五分钟法则是内存数据存储的理论依据.这个是一切的源头. 几个名词解释: 网络分区:俗称“脑裂”.当网络发生异常情况,导致分布式系统中部分 ...

  7. 《java程序设计》结对编程-四则运算（第一周-阶段总结）

    一.需求分析(描述自己对需求的理解,以及后续扩展的可能性) 实现一个命令行程序,要求: - 自动生成小学四则运算题目(加,减,乘,除) - 支持整数 - 支持多运算符(比如生成包含100个运算符的题目 ...

  8. Redis五大数据类型以及操作

    目录: 一.redis的两种链接方式 二.redis的字符串操作(string) 三.redis的列表操作(list) 四.redis的散列表操作(类似于字典里面嵌套字典) 五.redis的集合操作( ...

  9. cf803c 数论

    细节很多的题 #include<bits/stdc++.h> using namespace std; #define ll long long int main(){ ll n,k,tm ...

  10. 性能测试二十三：环境部署之Redis安装和配置

    redis:非关系型数据库,内存数据库,no-sql典型,   数据存放在内存中,一断电或者关闭就没有了 mysql.oracle.sqlserver···是关系型数据库,数据存放在磁盘中 一个Red ...