`<img>`放到`<div>`中底部出现空隙 以及解放方案.
形成情况:
- 外部的
不设置宽高, 由内部图片撑开
- 撑开后, 底部会有空隙
问题原因:
- div元素中的行内元素的默认
vertical-align
对齐方式是基线baseline
- img是行内元素, 所以会与基线对齐, 造成底下的空隙
解放方法:
- img标签转换为块级元素:
display: block
- 设置外层div的字体大小为0,
font-size: 0
- 设置img垂直方向的对齐方式, 只要是其他三种皆可,
vertical-align:bottom
,vertical-align:middle
,vertical-align:top
`<img>`放到`<div>`中底部出现空隙 以及解放方案.的更多相关文章
- js放到head中失效的原因与解决方法
1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- NodeJS写个爬虫,把文章放到kindle中阅读
这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯- 本文地址:http://w ...
- 如何让图片在垂直方向与 div的底部对齐 水平居中
需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...
- div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
- div中的字符换行
div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html 1.强制不换行,同时以省略号结尾. <div style ...
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- div中的内容超过容器宽度的问题
问题描述: <div class="category"> <div class="column-a">排名</div> ...
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
随机推荐
- homebrew -v 或homebrew -doctor报错请检查 .bash_profile是否有误
homebrew -doctor报错: /usr/local/Library/Homebrew/global.rb:109:in `split': invalid byte sequence in U ...
- link与import区别
本质上,这两种方式都是为了加载css文件,但还是存在细微的差别. 差别1:老祖宗的差别,link属于XHTML标签,而@import完全是css提供的一种方式. link标签除了可以加载css外,还可 ...
- 类的加载、时机、反射、模板设计、jdk7/jdk8新特性(二十六)
1.类的加载概述和加载时机 * A:类的加载概述 * 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. * 加载 * 就是指将class文 ...
- html5--6-35 列表和表格
html5--6-35 列表和表格 实例 学习要点 掌握列表和表格的样式设置 表格有关的属性: border-collapse 设置是否把表格边框合并为单一的边框.属性值:separate 默认值/c ...
- 一步一步学Silverlight 2系列(23):Silverlight与HTML混合之无窗口模式
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- hdu-2680 Choose the best route(最短路)
题目链接: Choose the best route Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- 【前端】CentOS 7 系列教程之四: 配置 git 服务器自动部署
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_4.html 安装pm2守护进程,备用 npm install -g pm2 创建/srv/www文件夹 ...
- Code:zabbix 目录
ylbtech-Code:zabbix 目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://y ...
- .NETFramework:Regex
ylbtech-.NETFramework:Regex 1.返回顶部 1. #region 程序集 System, Version=4.0.0.0, Culture=neutral, PublicKe ...
- fileupload简单使用
form.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" page ...