[Web 前端] 解决因inline-block元素导致的空白间距和元素下沉
cp from : https://www.jianshu.com/p/617e78a27c88
** 前言： ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一，可以将原本占据一行的块级元素，转变为可以并列显示的行内块级元素。
关于如何消除这 “ 4px ” 的空白间距，网上已经有了不少方法，其中个人觉得用font-size:0 解决空白间距是最为方便简单的了。
下面做个简单的Demo
.html
<body>
<div class="a"></div>
<div class="b"></div>
</body> .css
.a{
width: 100px;
height: 100px;
background: #1c8cff;
display: inline-block; }
.b{
width: 100px;
height: 100px;
background: #676767;
display: inline-block;
}
接着为两个盒子的父元素添加 font-size：0
body{
font-size: 0;
}
元素下沉
另外，当给inline-block元素中添加东西时，发现其元素也会随之下沉。
.html
<body>
<div class="a"><span>test</span></div>
<div class="b"></div>
<div class="c"></div>
</body>
.css
body{
font-size: 0;
}
.a{
width: 100px;
height: 100px;
background: #1c8cff;
display: inline-block;
font-size: 21px;
}
.b{
width: 100px;
height: 100px;
background: #676767;
display: inline-block;
}
.c{
width: 100px;
height: 100px;
background: #00a74a;
display: inline-block;
}
而解决方法可以用vertical-align属性。
.css
.a{
width: 100px;
height: 100px;
background: #1c8cff;
display: inline-block;
vertical-align: top;
font-size: 21px;
}
[Web 前端] 解决因inline-block元素导致的空白间距和元素下沉的更多相关文章
- Web前端开发最佳实践（6）：过时的块状元素和行内元素
前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...
- inline元素和inline-block元素的4px空白间距解决方案
实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家
- inline-block元素的4px空白间距解决方案
http://www.jb51.net/css/68785.html inline-block元素的4px空白间距解决方案
- Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱
最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...
- img元素底部有空白间距的问题
<div style="width:100px;height:100px"><img src="./1.jpg"></div> ...
- web前端工程师在移动互联网时代里的地位问题
支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...
- web前端工程师在移动互联网时代里的地位问题 为啥C/S系统在PC端没有流行起来，却在移动互联网下流行了起来 为啥移动端的浏览器在很多应用里都是靠边站，人们更加倾向于先麻烦自己一下，下载安装个客户端APP
web前端工程师在移动互联网时代里的地位问题 支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规 ...
- Web前端开发最佳实践（1）：前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
- Web前端开发最佳实践（2）：前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
随机推荐
- 7-10Editing aBook uva11212（迭代加深搜索 IDA*)
题意: 给出n( 2<=n<=9) 个乱序的数组 要求拍成升序 每次 剪切一段加上粘贴一段算一次 拍成1 2 3 4 ...n即可 求排序次数 典型的状态空间搜索问题 ...
- 000 SpringMVC介绍
1.介绍 2.MVC 模型(Model)封装了应用程序数据,通常它们将由POJO类组成. 视图(View)负责渲染模型数据,一般来说它生成客户端浏览器可以解释HTML输出. 控制器(Controlle ...
- sublime插件CSS转rem配置
{ "px_to_rem": 40, //px转rem的单位比例,默认为40 "max_rem_fraction_length": 6, //px转rem的小数 ...
- django-QueryDict 对象
在 HttpRequest 对象中,属性 GET 和 POST 得到的都是 django.http.QueryDict 所创建的实例.这是一个 django 自定义的类似字典的类,用来处理同一个键带多 ...
- 网络与多线程---OC中多线程使用方法(一)
小编在此之前,通过一个小例子,简单的形容了一下进程与线程之间的关系,现在网络编程中的多线程说一下!!! *进程的基本概念 每一个进程都是一个应用程序,都有自己独立的内存空间,一般来说一个应用程序存在一 ...
- 8.5 正睿暑期集训营 Day2
目录 2018.8.5 正睿暑期集训营 Day2 总结 A.占领地区(前缀和) B.配对(组合) C 导数卷积(NTT) 考试代码 T1 T2 T3 2018.8.5 正睿暑期集训营 Day2 时间: ...
- [POJ1655]Balancing Act
思路:DP求树的重心.对于每个结点$i$,$d_i=\displaystyle{\sum_{j\in s(i)}}d_j+1$.删去这个点能得到的最大子树大小即为$\max(\max\limits_{ ...
- 【11.1校内测试】【快速幂DP】【带权并查集】【模拟】
Solution $jzy$大佬用了给的原根的信息,加上矩阵快速幂150行QAQ 然而$yuli$大佬的做法不仅好懂,代码只有50行! 快速幂的思想,把m看成要组成的区间总长度,每次将两段组合得到新的 ...
- python tcp 实时抓包
问题:之前我们系统上线后,因为是旧的系统,没有加统计的功能,比如用户喜欢那个页面,是哪些用户再访问,接口的负载能力等等. 解决办法:1,现有代码更改,添加功能.现有代码侵入太多,工作量比较大 2,想到 ...
- Codeforces Beta Round #14 (Div. 2) B. Young Photographer 水题
B. Young Photographer 题目连接: http://codeforces.com/contest/14/problem/B Description Among other thing ...