inline-block引发的高度问题

已于 2022-03-15 23:41:22 修改
阅读量1k 收藏 1
点赞数 1
文章标签： css css3 html
于 2022-03-15 23:06:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NaSaga/article/details/123512825
版权
博客探讨了在CSS中使用inline-block属性时遇到的高度问题，尤其是空内容导致的不可见占位符。通过设置font-size:0可以解决横向元素间的隐藏字符问题，但对纵向排列的元素效果不明显。作者发现body的font-size设为0可以消除留白间距，而div或p的font-size不影响这一间距，暗示问题源于body内的不可见字符。
摘要由CSDN通过智能技术生成

inline-block引发的高度问题

  • 当div为块元素block或行内元素inline时，空内容，无宽高，后续元素会占据位置
  • 当div为行内块inline-block时，空内容，但出现了不可见的占位符。

根据查阅到的一些处理方式：使用font-size:0可以解决横向元素间的隐藏字符问题。
但对于纵向的排列元素，font设为0仍然没有解决问题
估计还是与行内元素的空格符号有关

虽然可以用非inline-block的方式处理布局，但问题的原理还是希望了解一下。
权且当个备份记录在此。

<!DOCTYPE html>
<html>
<head>
	<meta charset
最低0.47元/天 解锁文章
NaSaga
关注
CSS13_由html{height: 100%} 引发的CSS百分比宽高度的思考
linxwx的博客
11-20 1344
html {height: 100%}，其高度是浏览器给的
IE6下 vertical-align:middle 和 height 引发的边框消失
09-27
display:inline-block; height:100%; overflow:hidden; } ``` 3. **使用条件注释或浏览器特定前缀**：对于仅影响IE6的情况，可以使用IE6的条件注释或者CSS Hack来针对IE6应用不同的样式。 ```html <!--[if ...
inline-block元素高度为0，父级仍被撑起，问题元凶—strut
userkang的博客
03-29 2015
背景 最近遇到一个问题，在 div 元素下插入一个 iframe 元素，宽、高、边框都设置为0了，但 div 还是被撑起了一个高度。 <div style="background: orangered;"> <iframe src="/" style="width: 0; height: 0;" frameborder="0"></iframe> &...
Inline-block没有内容时，仍有高度
u010552788的专栏
07-18 2382
如下图，第二个line-block的span没有内容，但是div的高度是120px demo: https://codepen.io/GitKou/pen/qNxNxj<div> <span class="a">111</span> <span class="b"></span> </div>div { font-size: 20px; line-height: 60px; b
inline-block容器的高度撑开位置
weixin_34150503的博客
11-26 326
block的高度是从最上面撑开的 那么inline-block呢？ 直接上代码 <!doctype html> <html> <head> <meta charset="utf-8"> <style> #test { line-height: 0; font-size: 80...
关于inline-block高度带来的bug及解决方案
qq_25650505的博客
11-27 1494
目录前言寻找问题的根源1. input标签默认样式中的影响因素2. 排除elementUI对input标签的影响解决方法 前言 今天在开发当中偶然遇到一个问题，如下图，这里引入一个 input标签，利用input的focus来实现时间线的定位。 在 v-show 和 v-if 为 false 时不能正常的调用focus方法来实现时间线的定位，所有要通过css样式来将input标签从页面内“隐藏”，同时不能通过display:none的方式来实现 于是就尝试，将input的宽 高 内外边距设置为0，于是问题
模拟表格 inline-block等高布局
weixin_33688840的博客
08-11 135
表格是个好东西，它可以自动根据内容来调整格子，确保数据正常显示，并且不破坏表格的结构。但也有一些劣势，因为是用大量标签堆砌而成，页面结构会比较乱，细节也往往不容易控制。所以我们希望有表格的展示效果，但不想用表格，于是就有了模拟表格。　　对于HTML中的同级数据，我们更希望把它们放到一起。所以UL、LI的结构可以满足需求，UL就是整个表格，LI就是我们的单元格。对LI元素设置display:inli...
使用inline-block后，高度出现Bug
余百炼的博客
12-03 1183
在做一个小demo时候，出现虽然已经设置了height为44px；但是在浏览器上高度明显不对，经过查阅知道是inline-block元素存在的bug导致。这篇文章对于这个问题给出了很多解决办法：https://segmentfault.com/a/1190000010934928 我的bug: 解决办法：  ...
定义内联元素span的最小高度问题
09-28
而`display:inline-block`则保留了内联特性，同时允许设定宽度和高度，且不会强制换行。 ```css span { display: block; } ``` 或者 ```css span { display: inline-block; } ``` 2. **使用`float`...
span掉落的演示代码
02-29
标题“span掉落的演示代码”和描述中的问题，集中在`display:block-inline`这一属性上，它涉及到的是如何在保持元素内联特性的基础上，使它们具有块级元素的某些特性，比如占据一整行。 首先，我们需要理解CSS的`...
三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～...
weixin_34204057的博客
06-19 148
ie6、ie7支持expression，虽然效率不高，但对于解决一些特别的css布局问题非常有用， 现代浏览器(chrome|firefox|opera|safari等)支持新的盒模型，以及一些非常有用的css属性，而相对于夹在中间的ie8，可谓比较难处理， 幸好ie8相对ie6、ie7支持了一些特性，比如:before/:after伪元素，before可以说是非常有用的伪元素，可以在元素外额外增...
html伪元素before占用高度,使用before伪元素出现的问题？
weixin_30843121的博客
06-23 1007
before,after会占据元素里边的空间，我一直以为是占据外边的空间。如果不用nowrap元素就会换行是为什么？为什么设置inline-block不会包含整个标签了？怎样让他全部都包含到？伪元素为什么用不了百分比设置高度，宽度却可以用百分比？考虑到自适应手机端这样做是不是最好的选择？哈哈哈啊哈哈哈哈哈哈哈哈.column_05,.column_06{text-align: center;}.c...
css总结 -使用display：inline-block，出现元素高度错位
热门推荐
benben0729的专栏
08-30 1万+
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致，发生错位。 &lt;style&gt; .left{ display:inline-block; height:110px; width:110px; } .right{ display:inline-block; height:110px; width:110px; } &lt;/style&gt; ...
解决div与span等inline元素同行后高度不一致问题
little_newBee的博客
05-19 6433
这里场景是有一个div使用float，本来前面的span由于后面div的浮动被挤到了后面。这是因为浮动破坏了div的inline-box导致的。但是导致了，这两个元素的高度不一致的问题，并且无法用margin解决。即使用了vertical-align解决了小x的问题也没有什么反应，看来问题的原因不在这里，至于具体原因现在仍不是很清楚，网上找到了下面这样的代码得以解决。将div和span都table化
解决display:inline-block 出现的间隙
10-09 7539
是把父ＤＩＶ加上：font-size:0; 他的作用便是让多余的空白符消失，当然这会造成所有子元素的文本都一同消失，因此你需要再在子元素加一个font-size:12px。
CSS block、inline和inline-block
Hillbox
08-28 567
block一个占一行，默认宽度100%，可以设置宽高。一般可以嵌套block和inline-block。inline挨着堆放，直到一行不够再换行，设置宽高不起效果，可以padding和margin。粉色是block、蓝色是inline、金色是inline-block。inline-block在inline的基础上，可以设置宽高。............
CSS使用display:inline-block会产生的问题以及解决的方法
爱码士&的博客
06-06 616
问题复现 问题: 两个display：inline-block元素放到一起会产生一段空白。 如代码:
关于inline-block布局需要注意几点事项
weixin_30580341的博客
02-20 129
　　之前在网上看到一个关于CSS基本布局的一个教学网站，内容很简洁，http://learnlayout.com/。有一小节是讲关于inline-block布局需要注意的几点事项，引用之。 　　Inline-block : Few things that you need keep in mind 　　You can also use inline-block for layouts. T...
Vue之封装上传组件、hover伪类变量样式、动态设置全局样式、自定义手势光标、组件双向绑定、鼠标指针样式、calc计算、选择文件、自动上传、插槽传参、emit
最新发布
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
05-25 1035
Vue之封装上传组件、hover伪类变量样式、动态设置全局样式、自定义手势光标、组件双向绑定、鼠标指针样式、calc计算、选择文件、自动上传、插槽传参、emit
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值