511,display:inline-block什么时候不会显示间隙？

Posted 2021-03-07 1998archer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了511,display:inline-block什么时候不会显示间隙？相关的知识，希望对你有一定的参考价值。

（百科：

在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

display：inline；强制变成行内元素

display：block；强制变成块元素

而display：inline-block；顾名思义就是行内块的意思了，他具备了行内元素不换行的特征，同时也有块元素可以设置宽高的特征）

eg，

<html>

<head>

<title>display:inline-block元素之间空隙的产生原因和解决办法</title>

.parent .child {

display: inline-block;

background-color: #fdfd04;

width: 100px;

height: 100px;

}

.pst1{

margin-left: -5px;

}

</style>

</head>

<body>

<div class="child">child1</div>

<div class="child pst1">child2</div>

</div>

</body>

</html>

以上是关于511,display:inline-block什么时候不会显示间隙？的主要内容，如果未能解决你的问题，请参考以下文章