【前端】display:inline-block中间的间隙

简介: 【前端】display:inline-block中间的间隙

父元素宽度800px

两个并列子元素宽度设为50%,并且使用了display:inline-block

结果一运行,两个元素不在同一行?

我查审元素,两个子元素div的宽度都是400,也没有边框,边距的影响。400+400=800,看着没问题吧

后来经过百度发现,原来是两个子元素标签之间存在空白字符的影响。

比如下面这两个子元素

w1.png

q6.png

上一个div结束标签和下一个div开始标签,没在一行吧,那中间是不是存在你看不见的换行?

对,就是它影响了

q5.png

所以解决方案很简单

q4.png

上一个div的结束标签和下一个div的结束标签写在一行。

就没问题了

q3.png

不过一代码格式化,得,代码自动换行了。

那就采用另外一种方法

父元素设置font-size:0

这意味这那个换行的空白字符大小是0,没有它位置好吧,0。就不会造成两个div之间的间隙了。

q2.png

我看百度说父元素设置了font-size:0之后,子元素要设置回font-size的大小,这样文字才能正常显示

我在子元素没有设置回font-size,文字还是显示的。

我就想是不是因为文字有span包裹,但是删除span后,也没问题

q1.png

当然还有其他解决方案,不过我只提到的我认为是个不错的解决方案的。如果你想要其他解决办法,可以继续搜索。

相关文章
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
66 4
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第1天】小程序的前端 display 有什么类型?
53 2
|
3月前
|
前端开发 UED 开发者
【前端秘籍】掌握 display: none 与 visibility: hidden 的奥秘,让你的网页设计更上一层楼!
【8月更文挑战第23天】在Web前端开发中,常需控制元素的可见性。本文详细对比了两种主流CSS隐藏方法:`display: none`和`visibility: hidden`。`display: none`彻底移除元素在页面布局中的位置,适用于无需保留空间的隐藏场景;而`visibility: hidden`仅使元素视觉上消失,仍保留其布局位置,适用于需要动画效果或保留布局结构的情况。通过具体示例展示了两种方法的实际应用,帮助开发者根据项目需求选择最合适的方式,提升用户体验。
56 0
|
6月前
|
前端开发 JavaScript
【Web 前端】display: none 和 visibily: hidden 区别?
【4月更文挑战第22天】【Web 前端】display: none 和 visibily: hidden 区别?
|
6月前
|
前端开发
【零基础入门前端系列】—怪异盒模型和display属性(十九)
【零基础入门前端系列】—怪异盒模型和display属性(十九)
|
前端开发 容器
【前端】一文读懂display: inline-block
【前端】一文读懂display: inline-block
420 2
|
前端开发
web前端-CSS(display,position,overflow和浮动float)
web前端-CSS(display,position,overflow和浮动float)
130 0
|
前端开发
web前端-CSS(display,position,overflow和浮动float)
display(显示) display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。 下面我们来看看display的属性有哪些吧。
web前端-CSS(display,position,overflow和浮动float)
|
前端开发
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
web前端学习(二十二)——CSS3元素的显示(display)、可见性(visibility)与溢出(overflow)属性的相关设置
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2
下一篇
无影云桌面