使用display inline-block 布局时，出现的间距问题的解决办法和相关说明

在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行。而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。

使用 display inline-block 将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

请大家先看display inline-block 实际应用中的效果

.my-test { width: 100%; height: 50px;}
.my-test ul { }
.my-test ul li { list-style: none; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}
<div class="my-test">
  <ul><li>1</li><li>2</li><li>3</li></ul>
</div>

增加 display inline-block 样式

.my-test ul li { list-style: none; display: inline-block; vertical-align: middle; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}

这里有一个问题：

li之间出现了外边距

解决这个问题的办法有两种：

1.li元素之间不换行

<div class="my-test"><ul><li>1</li><li>2</li><li>3</li></ul>
</div>

如图，2和3之间未换行，外边距消失。

2.ul设置 font-size:0px;

如图，li之间的外边距都消失了。

继续思考为什么li之间会出现外边距。

<div class="my-test"><ul id="ulid"><li>1</li><li>2</li><li>3</li></ul>
</div>

获取UL的子节点

可以看到，第一个li和第二个li之间有一个text的节点，而第二个li和第三个li之间并没有节点。

这里延伸出来新的问题 1.为何第一个text节点并没有导致第一个li出现外边距 2.text节点为何会导致出现外边距

关于第一个问题，猜测是因为浏览器自动帮忙处理了第一个节点，有知道原理的兄弟，请留言，拜谢。

第二个问题，text节点其实是一个回车，回车会被解析为一个空白符。空白符浏览器是作为一个半角空格来处理的。

.my-test ul {}<div class="my-test"><ul id="ulid"><li>1</li><li>2</li> <li>3</li></ul></div>

在2和3之间手动加入一个空格

出现了外边距

这也解释了为何设置font-size:0之后，间距会消失的情况。

转载于:https://www.cnblogs.com/tmbm/p/10374633.html

使用display inline-block 布局时，出现的间距问题的解决办法和相关说明相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
Android应用启动时白色闪屏原因及解决办法
白色闪屏现象: 如果OnCreate().onStart().onResume()中操作太多,耗时较久.那么就会在主界面显示出来之前出现白色闪屏.为了更清晰的看出白色闪屏,这里在代码中执行50000次 ...
打开Office时出现“运行时错误91”问题的解决办法
打开Office时出现"运行时错误91"问题的解决办法一.将 C:/Documents and Settings/All Users/Application Data/Micro ...
mysql出现1499错误_连接MySQL时出现1449与1045异常解决办法
连接MySQL时出现1449与1045异常解决办法 mysql 1449 : The user specified as a definer ('root'@'%') does not exist 解 ...
lombok使用中出现继承关系的对象时，出现的问题及解决办法
lombok使用中出现继承关系的对象时,出现的问题及解决办法参考文章: (1)lombok使用中出现继承关系的对象时,出现的问题及解决办法 (2)https://www.cnblogs.com/h- ...
python3.8.3下载不了nltk_在ubuntu16.04+python3.5情况下安装nltk,以及gensim时pip3安装不成功的解决办法...
在ubuntu16.04+python3.5情况下安装nltk,以及gensim时pip3安装不成功的解决办法,我刚开始因为不太会用linux命令,所以一直依赖于python 的pip命令,可是怎么都 ...
Ubuntu连接以太网时显示“设备未托管”的解决办法
Ubuntu连接以太网时显示"设备未托管"的解决办法故障分析: 电脑之前可能设置过PPOE(有线宽带虚拟拨号),常见为连接校园拨号宽带. 解决办法: 第一步:打开终端第二步:切 ...
12 c for. oracle rac,【案例】Oracle RAC FOR AIX搭建执行root.sh时两次报错的解决办法
天萃荷净运维DBA反映在aix 5.3 ml6安装10.2.0.1 rac报错0509-036 Cannot load program crsctl.bin because of the follo ...
Mac cnpm装包时提示Error: EACCES: permission denied解决办法
Cnpm装包时提示Error: EACCES: permission denied解决办法 2018年03月04日 09:31:51 miniminixu 阅读数:1598 版权声明:本文为博主原创文 ...

使用display inline-block 布局时，出现的间距问题的解决办法和相关说明

使用display inline-block 布局时，出现的间距问题的解决办法和相关说明相关推荐

最新文章

热门文章