[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）：前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
随机推荐
- activeMQ安全配置及常见问题解决
https://blog.csdn.net/dandan2zhuzhu/article/details/78461872
- 【CodeChef】QTREE- Queries on tree again!
题解 给你一棵基环树,环长为奇数(两点间最短路径只有一条) 维护两点间路径最大子段和,支持把一条路径上的值取反 显然只要断开一条边维护树上的值,然后对于那条边分类讨论就好了 维护树上的值可以通过树链剖 ...
- P2870 [USACO07DEC]最佳牛线，黄金Best Cow Line, Gold
P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Gold我比赛的时候A了,luogu上25分,QAQ,又憨又傻的200+代码,我为什么要干电脑干的事情,无语了.如果左边 ...
- 【Ray Tracing in One Weekend 超详解】 光线追踪1-6
新的一年,前来打卡 Preface 回顾上一篇,我们讲述了漫反射材质,也就是平时的磨砂表面. 它一种将入射光经表面随机散射形成的材质,是一种非常普遍的表面形式. 这一篇,我们将来学习镜面反射,或者说是 ...
- 多线程学习笔记二之JUC组件
目录 概述 JUC锁框架图 使用内置锁还是JUC显示锁? 概述 为了对共享资源提供更细粒度的同步控制,JDK5新增了java.util.concurrent(JUC)并发工具包,并发包新增了Loc ...
- maven配置文件中modules的作用
modules 从字面意思来说,module就是模块,而pom.xml中的modules也正是这个意思,用来管理同个项目中的各个模块:如果maven用的比较简单,或者说项目的模块在pom.xml没进行 ...
- Android中线程通信的方式
Android 跨线程通信 android 中是不允许在主线程中进行 网络访问等事情的因为UI如果停止响应5秒左右的话整个应用就会崩溃,到Android4.0 以后 Google强制规定,与网络相关的 ...
- NLP文本相似度(TF-IDF)
本篇博文是数据挖掘部分的首篇,思路主要是先聊聊相似度的理论部分,下一篇是代码实战. 我们在比较事物时,往往会用到“不同”,“一样”,“相似”等词语,这些词语背后都涉及到一个动作——双方的比 ...
- poj 1797 最短路变形dijkstra
题意:题目大意:有n个城市,m条道路,在每条道路上有一个承载量,现在要求从1到n城市最大承载量,而最大承载量就是从城市1到城市n所有通路上的最大承载量 链接:点我 解题思路:其实这个求最大边可以近似于 ...
- Codeforces Beta Round #14 (Div. 2) C. Four Segments 水题
C. Four Segments 题目连接: http://codeforces.com/contest/14/problem/C Description Several months later A ...