[Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

cp from : https://www.jianshu.com/p/617e78a27c88

** 前言： ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一，可以将原本占据一行的块级元素，转变为可以并列显示的行内块级元素。

display:inline-block 常被用来代替float进行页面布局，不过正所谓金无足赤、人无完人，当使用 inline-block 后会出现“4px”的空白间距。
关于如何消除这 “ 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;
}

转载于:https://www.cnblogs.com/0616--ataozhijia/p/9415362.html

[Web 前端] 解决因inline-block元素导致的空白间距和元素下沉相关推荐

WEB前端学习（3）CSS复习二（复合选择器+元素显示模式+ 背景）
一 CSS 复合选择器总结:复合选择器 1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套时,内 ...
Web前端开发笔记——第二章 HTML语言第一节标签、元素、属性
目录一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素三.HTML DOM树结语一.什么是HTML? HTML语言,即超 ...
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform
1.less * {margin: 0;padding: 0;//注意防止页面下来body {height: 100%;overflow: hidden;#wrap {position: absolu ...
web前端工程师在移动互联网时代里的地位问题
支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...
码匠编程：零基础自学WEB前端，从第一份工作5K到现在13K，学习经验分享
现在看到各行各业的人都在转行学习WEB前端,想给大家一些学习建议和忠告.首先告诉你的是WEB前端是高薪职位,学出来后薪资起码五千起步,干了一年后薪资基本会翻到8K.所以想要拿到高薪是没有那么容易的,不 ...
尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...

[Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

元素下沉

[Web 前端] 解决因inline-block元素导致的空白间距和元素下沉相关推荐

最新文章

热门文章