【小瑕疵】在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在插入一条数据后,如何能获得 ...
随机推荐
- 关于label和input对齐的那些事
input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...
- javascript-基本数据类型和转换
ECMAScript中有5种基本数据类型:Undefined.Null.Boolean.Number.String.还有1种复杂数据类型-Object,Object实质上是由一组无序的名值对(键值对) ...
- JSON的服务器开发之路
JSON的服务器开发之路 不知道需要哪儿些包... /dcywpt/WebRoot/WEB-INF/lib/commons-collections-3.2.jar /dcywpt/WebRoot/WE ...
- Maven项目搭建(一):Maven初体验
今天给大家介绍一个项目管理和综合工具:Maven. Maven: maven读作 ['meivin],本意是指可以被信任的领域专家,致力于传播知识(来自于http://en.wikipedia.org ...
- sublime 快速安装多个插件的两种方法[Advanced Install Package]与[Package Control.sublime-settings]
环境 sublime 3,目前官网下载的sublime3 已经支持自动安装 Package Control . 第一种: ctrl+shift+p 调出命令面板以后 以前都是使用 Package Co ...
- Https握手协议以及证书认证
1. 什么是https Https = http + 加密 + 认证 https是对http的安全强化,在http的基础上引入了加密和认证过程.通过加密和认证构建一条安全的传输通道.所以https可以 ...
- angularjs fileUpload
文件上传一直是我不熟悉的地方,<a href='https://github.com/nervgh/angular-file-upload/wiki/Module-API'>官网解释的例子 ...
- noip2008(最优贸易)
C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通行的道 ...
- 开启SQL Server执行占用时间显示和逻辑读取次数显示
两条命令 1:set statistics time on 这条命令会显示你编译这条语句和执行这条语句花多长时间 2.set statistics io on 这条命令会显示你逻辑读取了多少次数据库和 ...
- .net Core 1.0.1 下的Web框架的的搭建过程step by step
环境:ubuntu+VScode 数据库:mysql ,ORM框架:chloe 官网 看完本篇文章你能学会 在Vscode下创建项目,一些基础的命令 ,以及得到一个配置文件的简单读取实例 1,在VS ...