解决img标签上下出现间隙的方法
图片与父元素下边缘有 2px 的间隙,并不是因为空格。多个 inline-block 元素之间的间隙才是因为空格。
任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式。----《CSS权威指南》
如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是你对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙
1.第一种解决方案
既然是 inline 元素才会发生这个问题,那我们自然可以简单粗暴的解决这个问题,那就是给我们的元素“变个性”,让它从 inline 变为 block 不就可以了么?
2.第二种解决方案
这也太粗暴了,变了性别,回头还怎么愉快的玩耍呀,所以我们要尝试曲线救活,我们可以去修改一下它的垂直对齐方式呀,这样是不是就可以了呢?
vertical-align 的默认属性就是 baseline ,我们只要设置了跟 baseline 不一样的属性,都可以避免这个问题。
baseline 默认
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length
% 使用"line-height"属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承vertical-align属性的值
3.第三种解决方案
使用浮动,float
浮动虽好,可不要贪杯哟
4.第四种解决方案
父元素字体大小设成0
font-size: 0;
解决img标签上下出现间隙的方法的更多相关文章
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- 解决img标签与其它标签间隙问题?
解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距 代码如下: <!DOCTYPE html> <html> <hea ...
- 解决img标签间距问题
解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距. 代码如下: 1 <!doctype html> 2 <html lang=& ...
- MUI框架a链接href跳转失效解决方法,解决MUI页面不会滚动的方法
//解决 所有a标签 导航不能跳转页面 mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决MUI ...
- 最齐全的站点元数据meta标签的含义和使用方法
最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的I ...
- 【Maven】【IDEA】在idea中开发web项目,解决maven的jar包冲突的方法
在idea中开发web项目,解决maven的jar包冲突的方法 第一步: 先对项目进行 clean ,再进行install 第二步: 出现NoSuchMethodException,ClassNotF ...
- 解决a标签点击会出现虚框现象
1.解决a标签点击会出现虚框现象. 当a标签获得焦点的时候,a标签的周围就会出现虚框,它不同于border,不占任何宽度,a失去焦点的时候就会消失,就是outline. 在遨游,Firefox ,IE ...
- 用python解决打标签时将xml文件的标签名打错
用python解决打标签时将xml文件的标签名打错 问题描述:再进行达标签时将magnetic_tile的标签名错误的打成了magnetic_title,又不想一张一张的修改 出现问题的xml文件 & ...
- Myeclipse解决dubbo标签不识别问题
Myeclipse解决dubbo标签不识别问题,引入dubbo.xsd文件,即可:
随机推荐
- 转 Oracle Cluster Health Monitor(CHM)简介
Cluster Health Monitor(以下简称CHM)是一个Oracle提供的工具,用来自动收集操作系统的资源(CPU.内存.SWAP.进程.I/O以及网络等)的使用情况.CHM会每秒收集一次 ...
- OS 内存泄漏 导致 整个aix主机block
问题 aix 主机 1.数据库主机使用vmstat 监控,隔几分钟 就是block 爆满. cpu 没有瓶颈,I/O 显示本地磁盘hdisk0和hdisk 1 是爆满. vmstat 同时显示大量pa ...
- 104 Maximum Depth of Binary Tree 二叉树的最大深度
给定一个二叉树,找出其最大深度.二叉树的深度为根节点到最远叶节点的最长路径上的节点数.案例:给出二叉树 [3,9,20,null,null,15,7], 3 / \ 9 20 / ...
- git clone fatal: unable to access 'https://github.com/carlon/demo.git/': Failed to connect to github.com port 443: Timed out
$ git config --global http.proxy $ git config --global --unset http.proxy 虽然之前没有设置代理,但是不知道为什么执行以上代码之 ...
- Win7下vc++6.0打开项目出现问题的解决方案
Win7下vc++6.0打开项目出现Microsoft(R) Developer Studio以及Unable to register this add-in because its DLLRegis ...
- C语言二维数组作为函数参数
设有整型二维数组a[3][4]如下:0 1 2 34 5 6 78 9 10 11 它的定义为: int a[3][4]={{0,1,2,3},{4,5,6,7} ...
- Android(java)学习笔记148:网易新闻RSS客户端应用编写逻辑过程
1.我们的项目需求是编写一个新闻RSS浏览器,RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用.RSS目前广泛用于网上新闻频道,bl ...
- 获取显示设备的名称及PNPDeviceID
实现效果: 知识运用: ManagementObjectSearcher类和ManagementObject类 实现代码: private void button1_Click(object send ...
- 简单的 创建AJax的方法
// 简单的ajax对象 var myAjax = { // XMLHttpRequest IE7+, Firefox, Chrome, Opera, Safari : ActiveXObject I ...
- vue-awesome-swiper 插件
Swiper 版本区分了组件和普通版本 (1)npm install vue-awesome-swiper –save (2)在 main,js 里引入(全局): import VueAwesomeS ...