解决三像素问题的总结：

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. 如何在CentOS 7上安装Munin

    在CentOS 7上安装Munin 首先我们需要在我们的系统中添加EPEL仓库. yum install epel-release 步骤2.安装LAMP(Linux,Apache,MariaDB,PH ...

  2. robotium之webview元素处理

    今天写robotium脚本发现,用uiautomatorviewer定位百度贴吧的登录框是无法定位的,如图: 明显无法定位用户名.密码输入框,无法定位元素那就无法对控件无法操作 如何定位webview ...

  3. JQ初学总结一

    Jquery是最火的JavaScript库,大部分web开发都会用到就jquery,而作为初学者看了一些jq的用法总结自己的学习以增强自己的认知. 普通的javascript的缺点是:每种控件的操作方 ...

  4. python flask安装

    windows环境上,打开命令行,输入pip  list  检查列表中是否安装过flask 安装flask命令:pip install flask 出现Successfully installed等提 ...

  5. 请手动释放你的资源(Please release resources manually)

    作者: Laruence(   ) 本文地址: http://www.laruence.com/2012/07/25/2662.html 转载请注明出处 我从来不认为这个问题是个问题, 直到昨天. 昨 ...

  6. selenium webdriver+python基本操作

    # -*- coding:utf-8 -*-#导入模块from selenium import webdriver from selenium.common.exceptions import NoS ...

  7. lnmp创建站点

    一.创建站点 1.输入命令 lnmp vhost add 输入域名 www.xxx.com 回车 回车 回车 y创建 n不创建 网站如果有目录权限 更改目录权限 chown -R www:www /h ...

  8. web----ssl通信

    ssl通信 https://www.cnblogs.com/zhengah/p/5007753.html

  9. CenOS下安装 Git，Git的初始设置，添加文件，提交文件

    一.配置DNS 1,配置DNSvi /etc/resolv.conf加入: 代码如下: nameserver 192.168.0.1 nameserver 8.8.8.8 nameserver 8.8 ...

  10. LICEcap方便快捷制作gif图片的工具

    总是看见别人的博客里面动态的小图片,是不是有种冲动自己也想搞,但是就是不知道咋搞,这里简单介绍一款很实用的制作gif的软件. LICEcap的网址:http://www.cockos.com/lice ...