[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）：前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
随机推荐
- ps不显示命令本身的进程号
当我们查看某个服务的进程时候,它会把命令本身的进程显示出来.如下图: 进程号2383 就是我命令本身的进程号,和我实际想看的进程无关 特别是在我们写脚本,kill进程时候会报错: 解决办法可以优化脚本 ...
- web程序快速开发
关于web程序快速开发个人见解以及经历 由于在之前公司业务的发展,需要在基于核心业务的基础上开发其他较为独立的业务系统,所以就有了这个基于Dapper,DDD概念的基础框架,由于个人基于这个框架已经经 ...
- Codeforces Round #533 (Div. 2) E - Helping Hiasat 最大团
E - Helping Hiasat 裸的最大团,写了一种 2 ^ (m / 2) * (m / 2)的复杂度的壮压, 应该还有更好的方法. #include<bits/stdc++.h> ...
- python 实现远端ftp文件上传下载
python 实现ftp上传下载 * 脚本需要传入两个参数,参数1为需要从远端ftp站点下载文件名称,参数2为已知需要下载的文件md5值,文件下载完成后会自动进行md5值校验 * 运行示例 [root ...
- Wireshark数据抓包教程之Wireshark的基础知识
Wireshark数据抓包教程之Wireshark的基础知识 Wireshark的基础知识 在这个网络信息时代里,计算机安全始终是一个让人揪心的问题,网络安全则有过之而无不及.Wireshark作为国 ...
- 如何用dat批处理文件关闭某端口对应程序-Windows自动化命令
如何用dat批处理文件关闭某端口对应程序? 网上找到的大部分都是手动操作,第一步先查出端口,第二步在根据上一步查到的端口手动去关闭进程.但我的需求不是这样的,我需要全自动处理.用于 dubbo 服务进 ...
- Qt编写websocketpp客户端
1.下载websocketpp,地址为https://github.com/zaphoyd/websocketpp,版本为0.7. 2.下载boost,地址为https://www.boost.org ...
- CentOS内核优化提示：cannot stat /proc/sys/net/bridge/bridge-nf-call-ip6tables: 没有那个文件或目录
临时解决,重启失效 modprobe br_netfilter 为了开机加载上面这个模块 cat > /etc/rc.sysinit << EOF #!/bin/bash for f ...
- sqlserver2014内存数据库特性介绍
sql server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了,下面就简单介绍一下sql server 2014的内存数据库的一些特性 相信大家对内存数 ...
- SGU 101 Domino （输出欧拉路径）
101. Domino time limit per test: 0.25 sec. memory limit per test: 4096 KB Dominoes – game played wit ...