img和父容器之间有间隙的问题
在前端开发中,经常遇到在一个img外面套div的时候,div的大小和img的大小并不一样,在底部会有一段空白.
代码如下:
<div>
<img src = ''imgs/1.jpg ''/ >
</div>
原因:img图片默认的vertical-align是baseline.而baseline又和父级底边有一定距离(这个距离和font-size,font-family有关),一个inline-block的元素,如果里面没有inline元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,则基线就是元素里面最后一行内联元素的基线.
方法:
1.将img图片的display:block
2.将div的line-height设置的足够小
3.将容器里的fontsize设置为0
4.将vertical-align设置为middle,bottom,top,只要不取baseline即可
相关:
1.IE的显示有几种模式,假如声明为Strict模式,IE以W3C显示文档,而W3C里img默认inline,除非自己声明block
2.空隙是ie针对盒模型默认的line-height和font-size.给img display:block虽然能解决问题,但并没从结构上考虑问题
img和父容器之间有间隙的问题的更多相关文章
- 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别
html css <div class="register-wrapper"> <div class="register"> &l ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- 去除inline-block之间的间隙
在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...
- H5弹性盒布局的使用(父容器属性)
为父容器添加display:flex/inline-flex 父容器可以使用的属性有: 1.flex-direction:决定主轴的方向 有四个属性值: row(默认值):主轴为水平方向,起点在左端. ...
- Tomcat中容器是什么以及容器与容器之间的数量关系。
Tomcat容器到底是什么 学java有一小段时间了,一直使用Tomcat,也知道Tomcat是一个大的Servlet容器,里面还有许多子容器,容器之间都是相互嵌套的.也看过一下接收Tomcat的文章 ...
- CSS子元素设置margin-top作用于父容器?
CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...
- Web容器、Servlet容器、Spring容器、SpringMVC容器之间的关系
以下内容为个人理解,如有误还请留言指出,不胜感激! Web容器 web容器(web服务器)主要有:Apache.IIS.Tomcat.Jetty.JBoss.webLogic等,而Tomcat.Jet ...
- 如何消除inline-block元素之间的间隙?
一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...
- web容器、sevlet容器、spring容器、springmvc容器之间的关系
原文链接:http://www.cnblogs.com/jieerma666/p/10805966.html https://blog.csdn.net/zhanglf02/article/detai ...
随机推荐
- 机器学习数学|Taylor展开式与拟牛顿
机器学习中的数学 觉得有用的话,欢迎一起讨论相互学习~Follow Me 原创文章,如需转载请保留出处 本博客为七月在线邹博老师机器学习数学课程学习笔记 Taylor 展式与拟牛顿 索引 taylor ...
- javascript 中parseInt 的用法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- github创建远程仓库
创建远程仓库 当你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一 ...
- TextView SpannableString 使用之实现可点击超链接效果
TextView SpannableString 使用之实现可点击超链接效果 如果看到这里说明你对 TextView 已经有了一定的了解,至少已经使用过该控件显示文字过.现在来实现一些复杂一点的效果. ...
- SQL1
这是社团的题目,我现在就写出来吧,总共两种方法,一种手注,一种用工具(sqlmap). 一.手注(盲注) 1,我们打开题目,可以看到一个登陆页面,这是我们在输入框里面输入万能密码: ' and '1 ...
- python基础教程——dict和set
dict python内置字典:dict,全称dictionary,在其他语言中称为map,使用键值对存储. ex: d = {'xiaoli' : 95 , 'xiaoming' : 98 , 'x ...
- web-故道白云&Clound的错误
web-故道白云 题目: 解题思路: 0x01 首先看到题目说html里有秘密,就看了下源代码如图, 重点在红圈那里,表示输入的变量是id,当然上一行的method="get"同时 ...
- 常用接口简析2---IComparable和IComparer接口的简析
常用接口的解析(链接) 1.IEnumerable深入解析 2.IEnumerable.IEnumerator接口解析 3.IList.IList接口解析 默认情况下,对象的Equals(object ...
- 关于RDLC报表打印预览界面显示页码问号的问题
原来在reportview中,vs2010新增了一个属性,pageCountMode,默认的Estimate,提供估算的页数,另外一个属性Actual,提供实际的页数.
- Akka(39): Http:File streaming-文件交换
所谓文件交换指的是Http协议中服务端和客户端之间文件的上传和下载.Akka-http作为一种系统集成工具应该具备高效率的数据交换方式包括文件交换和数据库表行的上传下载.Akka-http的数据交换模 ...