【小瑕疵】在div里插入img后在底部留有缝隙怎么解决
【本文转载自http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html】
图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法。
第一,给图片img标签display:block。
img{display:block}
第二,定义容器里的字体大小为0。
div {
width:110px;
border:1px solid #000000;
font-size:0}
第三,定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top
img{vertical-align:bottom}
其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。
造成图片在IE下与容器下边界有空隙的原因
在网上搜了一下,发现old9说的
图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。
至于这里的HTML属性align=”center”(对于图片浏览器会处理成align=”middle”),就相当于vertical-align:middle; 所以道理也是一样的,只要vertical-align不取baseline,这个空隙就消失了。
相关评论
1.ie的显示有几种模式,在html文档的开始部分声明<!DOCTYPE &hell;ip;.>
假如声明为strict模式,ie以w3c的方式显示文档,而w3c的标准里面<img />默认是一个inline的标签,除非自己显式的声明为 block
2.那个空隙是ie针对盒模型默认的line-height和font-size. 给img desplay:block;虽然能解决问题,但没从结构上来考虑.可谓治标不治本
【小瑕疵】在div里插入img后在底部留有缝隙怎么解决的更多相关文章
- 解决div里插入img下边缝隙问题
<html> <head> <title> new document </title> <meta name="author ...
- jsp页面往mysql里插入中文后数据库里显示乱码
1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,<%@ page contentType="text ...
- div里粘贴文字后,移动光标至最后
cursormanager.js //Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-hab ...
- 15LaTeX学习系列之---LaTeX里插入数学公式
目录 目录 前言 (一)常用的数学公式命令 ==1.上下标== ==2.矢量== ==3.括号== ==4.符号关系== ==5.三角形符号== ==6.求和与累积== ==7.积分与微分== ==8 ...
- U盘插入电脑后,提示需要格式化U盘如何解决?
未弹出U盘就拔掉U盘,有可能会破坏U盘的分区表.当再次把U盘插入电脑时,会提示需要格式化U盘,这是什么情况,如何解决呢?其实只要用DiskGenius硬盘恢复软件就可以解决这个问题.下面和小编一起来看 ...
- mysql插入数据后返回自增ID的方法
mysql和oracle插入的时候有一个很大的区别是,oracle支持序列做id,mysql本身有一个列可以做自增长字段,mysql在插入一条数据后,如何能获得到这个自增id的值呢? 方法一是使用la ...
- div里嵌套了img底部会有白块问题和图片一像素问题解决
div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...
- 用CSS3实现带小三角形的div框(不用图片)
现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...
- mysql插入数据后返回自增ID的方法,last_insert_id(),selectkey
mysql插入数据后返回自增ID的方法 mysql和oracle插入的时候有一个很大的区别是,oracle支持序列做id,mysql本身有一个列可以做自增长字段,mysql在插入一条数据后,如何能获得 ...
随机推荐
- StringBuffer与StringBuilder的区别,及实现原理
区别 1.StringBuffer 与 StringBuilder 中的方法和功能完全是等价的, 2.只是StringBuffer 中的方法大都采用了 synchronized 关键字进行修饰,因此是 ...
- 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
1635: [Usaco2007 Jan]Tallest Cow 最高的牛 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 383 Solved: 211 ...
- MVC+Spring.NET+NHibernate .NET SSH框架整合
在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MVC框架以后太灵活了(相比之前的web Form),嗯,关于.NET中的MVC框架我 ...
- Caused by: java.lang.RuntimeException: java.io.IOException: invalid constant type: 18
工程启动的时候有报下面这个错误的,更新下工程的jar包依赖,然后在工程的pom文件里加上下面的jar包 Caused by: java.lang.RuntimeException: java.io.I ...
- android-自定义广告轮播Banner(无限循环实现)
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
- [原创]HBase学习笔记(1)-安装和部署
HBase安装和部署 使用的HBase版本是1.2.4 1.安装步骤(默认hdfs已安装好) # 下载并解压安装包 cd tools/ tar -zxf hbase-1.2.4-bin.tar.gz ...
- 手把手教你做个AR涂涂乐
前段时间公司有一个AR涂涂乐的项目,虽然之前接触过AR也写过小Demo,但是没有完整开发过AR项目.不过经过1个多星期的学习,现在已经把项目相关的技术都学会了,在此向互联网上那些乐于分享的程序员前辈们 ...
- flex中过滤掉字符串的空格
1.先引入import mx.utils.StringUtil;这个包, 在使用StringUtil.trim(); 如:if(StringUtil.trim(this.d1.3.text) ==&q ...
- MCMC(三)MCMC采样和M-H采样
MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链 MCMC(三)MCMC采样和M-H采样 MCMC(四)Gibbs采样(待填坑) 在MCMC(二)马尔科夫链中我们讲到给定一个概率平稳分布$\pi$ ...
- dotweb——go语言的一个微型web框架(二)启动dotweb
以上的代码截图表示启动一个dotweb服务,在浏览器里输入127.0.0.1:8080,将会得到一个"index"的页面. app := dotweb.New() dotweb.N ...