[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

时间: 2024-10-29 10:58:23

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

WEB前端解决浏览器兼容性问题

1.HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法:统一使用document.getElementById("idName"); 2.const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量. 解

web前端工程师在移动互联网时代里地位问题

支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部分消费都贡献给了像京东这样具有火箭般快递速度的电子商城了.不过在支付宝十年账单里,有个统计数据引起了我的危机意识,在中国一些偏远或者是经济欠发达的省份,电子购物在居民的全部消费里的占比比发达地区高多了,而这个的助推剂居然是移动互联网在中国的普及,在中国使用智能手机和平板电脑购物的人们已经远超使用PC

inline-block及解决空白间距

參考:http://www.jb51.net/css/76707.html http://www.webhek.com/remove-whitespace-inline-block/ inline-block 属性的使用随处可见,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美,接下来为大家详细介绍下空白间隙是如何产生的,以及解决办法,感兴趣的朋友可以参考下哈 去掉display:inline-block元素间的多余空白 如下一段代码,di

web前端入门到实战:html块级元素和行级元素的区别和认识

行内.块状元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的:块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列. 3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(li

Web 前端开发中一些兼容性问题及其解决办法 (持续更)

浏览器兼容是前端开发人员必须掌握的一个技能,之前听过一句话:我们应该追求最新的浏览器使用最新的技术,但是一定要有渐进增强,向后兼容的思想.本篇文章就笔者自己平时遇到的一些兼容问题做个记录和整理. 1.IE8下元素有宽高但是元素没有内容时,对元素添加事件如click等无效 (埋链接和在图片上埋按钮时会经常遇到这个问题)  在IE8中如果元素没有内容,即便元素有宽和高,浏览器还是不能识别,这时一个很好的办法就是对该元素设置背景色,然后再让元素的透明度为0,这样元素背景色并不会显示,且元素内有内容,能

Web前端入门学习(4)—— 块级元素和行内元素之特征与转换

块级元素和行内元素  1.元素的定义 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.     div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度

web前端之HTML中元素的区分

作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素.在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解: 目前博主总结了三种分类方法:一是按封闭来划分,一是按显示内容来划分,一是按文档流来划分. 一.按封闭可分为双标签和单标签. 双标签也就是封闭标签,我们经常写的<html></html>.<div></div>等等成对出现的都是双标签,一般也叫标签对儿.单标签不是说不需要封闭,一般单标签里放的都是文本内容,可在第二个

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

Web前端技术:CSS部分深入---盒子模式,overflow属性,border属性,内外边距,水平居中问题,块\行内元素,浮动,层定位

1.盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间 2.overflow属性 hidden:超出部分不可见,默认值 scroll:显示滚动条 auto:如果有超出部分,显示滚动条 3.border属性 border-width:px \ thin \ medium \ thick border-style:dashed \ dotted \ solid \ double border-color:颜色 border:width  style color 案例 水平分割线: .