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

最新推荐文章于 2024-11-15 13:54:42 发布
最新推荐文章于 2024-11-15 13:54:42 发布
阅读量150 收藏
点赞数
文章标签： 前端 ViewUI

 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;
}

　　

 

weixin_34249367
关注
内联块inline-block块下沉、多余的水平间隙垂直间隙的问题
小菜鸡程序媛的挣扎史
08-01 945
把导航设置为inline-block以后总是会多出4px的垂直间隙 序 display有几种属性： inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置； block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义； 为了弥补inline和block的不足...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
陈小峰（iefreer）的专栏
12-28 1万+
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。
Web前端开发-边框设置
热门推荐
viewerlin的博客
04-25 1万+
Web前端开发，自学笔记整理 边框设置 1.边框设置技巧 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="te
关于inline-block问题
destiny'Note
10-31 529
前言 在重新学习css，做自己的学习demo时，设置一堆div在一行显示，呈现对比。 结果如图，设置了display:inline-block之后，出现了部分下沉现象。 改为float之后，又恢复正常对齐。 不过，很快就得到了解决。于是，就写了这篇关于inline-block问题的文章，包含了以前分享过的间距问题，在这里与大家分享。 一、下沉问题 原因 1. 行内元素有一个基线，所有在这一
CSS笔记
喜哥的博客
06-08 352
overflow:hidden溢出隐藏（超出wh的隐藏） display:block不在一行但可设置 display:inline-block行内元素 background-repeat:no-repeat不重复背景 border-radius圆角。与h一样，（圆与设计师设计效果一样） line-height行高，与h一样，（字在中间） float:left 向左浮动，不占据空间，left right none inherit（规定应该从父元素继承float属性值） 有浮动包裹不住overflow:hidd
inline-block元素的空白间距解决
u013008535的专栏
04-18 318
现象： 使用inline-block来代替float进行布局，会发现留下了一个问题。就是使用inline-block的元素之间会均在空白间距。如图： 出现的浏览器： IE8-9、Firefox、Safari、chrome，但是间距大小是由父元素字体大小决定的 原因：平时写代码，为了使代码看上去“层级分明”，通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况...
2021-2022计算机二级等级考试试题及答案No.5410.docx
11-02
9. HTML元素分类：行内元素（inline elements）如、和，而是块级元素（block elements），它会占据一整行。 10. 并发操作的问题：并发操作如果不加以控制，可能会导致数据不一致性，例如脏读、不可重复读和幻读等...
inline-block元素的空白间距解决方法
clh604的专栏
12-14 4663
使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。有关于使用inline-block来代替float的讨论也蛮多的。 不过就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。 先看下代码 HTML部分： 1 2 3 4
CSS 属性列表
corlin6688的博客
11-24 967
在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐。设置或检索弹性盒模型对象的子元素如何分配空间。校准行内的初始行的设置就是具有首字母的框使用初级连接点。校准行内的初始行的设置就是具有首字母的框使用辅助连接点。设置定位元素的上外边距边界与其包含块上边界之间的偏移。设置定位元素下外边距边界与其包含块下边界之间的偏移。设置定位元素左外边距边界与其包含块左边界之间的偏移。设置定位元素右外边距边界与其包含块右边界之间的偏移。
如何解决inline-block元素的空白间距
zyoungw
07-01 180
有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”...
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 527
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
Vue中的常用指令
m0_62388400的博客
11-12 1183
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
App WebView白屏检测及解决总结，包括Android 和 iOS
LiangGang365的专栏
11-12 762
相对Android上的白屏，ios白屏的出现在app端上大部分为内存占用产生，其他网络、资源、js语言兼容、中文字样ulr等同样也会发生白屏，这类问题需要针对分析。在APP端上除去相关页面元素，加载错误、兼容性，语法错误造成白屏，以上相关方案可以启到检测并尝试重试刷新页面，达到用户无感知，避免白屏的出现和出现白屏瞬间进行切换或者刷新。内存导致的白屏或者其他异常问题，有时白屏显示，有时界面渲染失败等奇怪现象，但是内存白屏是最不好处理，又需要给用户友好体验的问题。
【前端基础】Javascript取整函数以及向零取整方式
警警的博客
11-11 743
在JavaScript中，有多种方式可以对数字进行取整操作，即去掉小数部分，只保留整数部分。在JavaScript中，有多种方法可以对数字进行取整操作。这些方法各有特点，适用于不同的场景。方法会去掉一个数字的小数部分，返回其整数部分，但不进行四舍五入。在处理数字时，会将操作数转换为32位整数，从而截断小数部分。每种方法都有其适用的场景和限制，选择时需根据具体需求进行权衡。也是一种按位取整的方式，效果与。类似，会截断小数部分。
前端文件优化
最新发布
weixin_62668406的博客
11-15 612
对于一张100*100像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字 节），所以该图⽚⼤⼩⼤概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项⽬中，⼀张图⽚可能并不需要使⽤那么多颜⾊去显示，我们可以通过减少每个 像素的调⾊板来相应缩⼩图⽚的⼤⼩。
springboot整合websocket实现复制目录进度推送
前人栽树，后人乘凉。
11-14 318
/ 替换为你的WebSocket地址。启动Spring Boot应用程序，然后访问前端页面并触发文件复制操作。例如，通过浏览器访问。你应该能够在前端看到实时的复制进度。创建一个控制器来触发复制操作。
【Java Web】JSTL及其核心库介绍 JSTL函数
m0_66584716的博客
11-12 1204
JSTL（JavaServer Pages Standard Tag Library）是 Apache 提供的一个用于 Java Web 开发的标准标签库，它依赖于表达式语言（EL），旨在简化 JSP 的开发过程。
ArkUI---常用组件---切换按钮 (Toggle)
m0_73992525的博客
11-15 633
ArkUI中的常用组件Toggle的三种形态：Button、Checkbox、Switch
【Java Web】Ajax 介绍及 jQuery 实现
m0_66584716的博客
11-15 814
AJAX（Asynchronous JavaScript and XML）是一种创建高效、动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下进行异步数据更新和交互，从而提供更流畅的用户体验。尽管名字中包含了XML，但实际上，AJAX可以使用任何格式的数据，包括JSON、HTML等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值