【前端】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

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

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

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    详解智能编码在前端研发的创新应用
  • 4
    智能编码在前端研发的创新应用
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 9
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 10
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布