Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论

最新推荐文章于 2023-06-07 10:09:05 发布
最新推荐文章于 2023-06-07 10:09:05 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011060906/article/details/73382154
版权

这两天发现一个问题，就是display为inline-block的元素有内容和没有内容情况下高度不一致，这对于有强迫症的喔来说是受不了的

于是我就进行了一系列的测试来找问题


发生的原因如下：




我直接怀疑是inline-block的影响
在inline或者是block的状态下都没有问题
实验得到：
在字体大小约等于inline-block元素的高度的百分之94.5的情况下高度差不多可以对其

字体大小是0的时候，有字符的元素的最高部分和没有字符的元素的最低部分对其












解决办法：
        上述问题在加上overflow等于hidden    或者vertical-align: middle之后解决了


ah_ty
关注
专栏目录
【应用】三列布局 - 两边固定宽度,中间自适应,高度一致
Dora_5537的博客
10-05 1281
一、Flex 布局 图1 <!DOCTYPE html> <html> <head> <title>三列布局-两边固定宽度,中间自适应,高度一致</title> <style> html,body{ margin: 0; padding: 0; } #main{ width: 100%...
display:inline-block的原理分析
09-25
IE 6 和 7 不直接支持 `display:inline-block`，但在某些情况下，对内联元素设置 `display:inline-block` 会触发 "layout"，这是一种 IE 特有的行为，使元素获得类似 `display:inline-block` 的效果。然而，对于块级...
使用display：inline-block后出现行内块元素高度不对齐的问题
webdowhatIlike的博客
11-21 928
可能是因为作为行内块元素的盒子 高度宽度都由内容决定 因此考虑用vertical-align：top/bottom/baseline解决
行内元素高度不一时如何实现高度对齐？
m0_46627730的博客
05-08 1885
我们编码的时候，总会遇到行内嵌套几个元素，要是这几个元素高度一致那就好办了，可要是高度不一致呢？如何使高度对齐使得界面更好看？ 就像下面该图一样，行内嵌套的span和textarea高度不一样，底部对齐布局就有点难看了，我想实现顶部对齐： 那要怎么使他们顶部对齐呢？ 效果图： 实现的方法主要大概有三种吧： absolute（绝对定位）不推荐： 给行元素相对定位：position: relative; 行内所有元素都开启绝对定位position: relative;并设置距离顶部为0top: 0; 缺
html block属性,css display block属性的意思、作用和效果
weixin_42513522的博客
06-07 5451
css中display的block属性是什么意思呢？他是指拥有该属性的html元素以块的方式显示，同时，该元素的前面和后面都会换行，也就是说，如果给一个元素B设置的display:block，那么该元素不会和他前面的元素A在一行显示，会另起一行，而在该元素后面的元素C也不会和此元素在同一行显示，也会另起一行，下面我们来举例说明一下：我们写一个DIV，在这个DIV里面加入1个标签、1个标签、1个标签...
html5中 块级元素与内联元素的解释和设置 display
最新发布
laocooon的博客
06-07 1302
a>、、、、、、、、、、（表示计算机源代码或者其他机器可以阅读的文本内容）、、...、、、、、、 （块引用）、行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。2、元素的高度、宽度、行高以及顶和底边距都可设置。
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
使用display:inline-block居中没有宽度的元素
09-25
"使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念：`text-align`属性和`display`属性的`inline-block`值，它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...
html5 innerheight,jQuery height()、innerHeight()、outerHeight()函数的区别详解
weixin_39965794的博客
06-29 171
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。下面我们以元素e...
js获取Html元素的实际宽度高度
热门推荐
makiyo的专栏
02-18 5万+
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。 小结，因为id.offsetWidth和id.offsetHeight
利用 html 和 css 实现导航栏下拉(display block、display none)
ZYCRY的博客
10-26 5070
利用 html 和 css 实现导航栏下拉(display block、display none) 需求 设计并实现一个导航栏菜单，对某个项目比如你的个人书籍按类别（硬件类、软件类、语言类、网络类等分法）进行分门别类，其中上面括号中的类别为导航栏的一级菜单，它们各自的二级菜单是你所拥有的或知道的几本可能的属于这些类别的具体书籍。大致功能如下： 1、新建一个web项目，在标签中创建一个容器，指定class属性=“header”。在容器中创建一个无序列表，指定class属性=“header_ul”。在其中添加几
解决用display:inline-block导致高度不一致问题
cooker_666的博客
11-30 5584
设置9宫格棋子的时候，通过给单独的square设置样式，原本是打算使用display;inline-block.来设计布局的。然后通过点击事件然后像square插入字体的时候发现了一旦插入，就会因为自动对齐字体底部导致高度变化。 .square{ display: inline-block; width: 80px; height: 80px; border: 1p...
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; ...
display：block含义
落尘的博客
11-30 2万+
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。 块级元素： 占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个...
HTML中display属性应用
u014311114的博客
01-08 5154
复制一段HTML代码，始终不显示，所有该查看的地方都看了之后发现， data-options="closed:true,cache : false,modal: true" style="display: none;"> 多了一句style="display:none;"属性，要么用show，要么去掉
HTML中display:inline-block;特性
lanseguhui的博客
05-24 4834
display:inline-block;内联级标签:布局特性:1.可以在同行排列2.支持所有的css样式设置3.在不设置宽高大小时,有内容撑开盒子的大小,其内容可以是任意的标签和文字4.垂直方向上,所有的行级标签,在默认情况下手机按照其内部最后一行文字的底线对齐,为了保持其一致性,需要给每个行级标签设置vertical-align属性,保证垂直方向上的对齐设置盒子的对齐基线Middle 将基线设...
Html5中display常用功能
恬静的男子的博客
10-23 8521
display:block; 将行内元素设置为块状元素 display:inline; 将快状元素设置为行内元素 display:none; 隐藏div a{ display:block; /*将a标签设置为块状元素*/ } } #c{ display:inline; /*将块状元素转换成行内元素*/ } #c{ display:none...
解决inline-block元素空白间距问题与优化方法
本文主要探讨了在HTML和CSS中使用`display: inline-block`时遇到的空白间距问题，特别是在多个元素并排排列时，由于浏览器默认的行内元素间距可能会导致多余的空白。作者通过实例展示了一个包含多个`<a>`标签的`div`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ah_ty

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值