Question

我有一个inline-block元素，左右各有inline个元素。

为什么inline-block右侧只有空格？

＆＃13;

span{
  background: red;
  padding: 10px;
}
span:nth-child(2){
  display: inline-block;
}

＆＃13;

<span>inline </span> 
<span>inline-block</span>
<span>inline </span>

＆＃13;

另外，为什么inline-block元素有一个像素高度差？

Fiddle

Answer 1

如果您删除第一个范围中单词inline后面的空格，则会有一个空格。

＆＃13;

span{
  background: red;
  padding: 10px;
}
span:nth-child(2){
  display: inline-block;
}

＆＃13;

<span>inline</span> 
<span>inline-block</span>
<span>inline</span>

＆＃13;

Answer 2

内联元素默认情况下它们周围有小空格，空格的大小由font-size确定..为了不占空间，你需要在包装元素上将font-size重置为0，检查编辑的小提琴{{3} }

<div class="wrap">
<span>inline </span> 
<span>inline-block</span>
<span>inline </span>
</div>

span{
  background: red;
  padding: 10px;
  font-size: 13px;
}
span:nth-child(2){
  display: inline-block;
}
.wrap{
  font-size: 0;
}

Answer 3

因为在inline-block元素上，元素之间的空间实际上是可视的，在屏幕和OP中，span元素之间有空格：

span{
  background: red;
  padding: 10px;
}
span:nth-child(2){
  display: inline-block;
}

<span>inline </span><span>inline-block</span><span>inline </span>

Answer 4

当内联元素的边界位于两个空格之间时，跟随边界（在内联元素之外）的空间被移除，从而在内联元素中留下空格。在您的情况下，被裁掉的空格是用于分隔span元素的换行符。来自spec：

对于每个内联元素（包括匿名内联元素），执行以下步骤，将bidi格式化字符视为不存在：


如果＆＃39; white-space＆＃39;设置为＆＃39; normal＆＃39;，＆＃39; nowrap＆＃39;或＆＃39; pre-line＆＃39;，

在另一个空格（U + 0020）之后的任何空间（U + 0020） - 即使是内联之前的空格，如果该空间也具有白色空间＆＃39;设置为＆＃39; normal＆＃39;，＆＃39; nowrap＆＃39;或者＆＃39; pre-line＆＃39; - 被删除。

请注意，这只是内联框的情况，即display: inline元素 - 不是内联块。在内联块元素的内容中添加空格不会导致其后的空间被折叠掉。

高度差主要与如何计算内联元素与内联块的高度有关，这本身就是一个完整的主题。请参阅规范的10.6.6和10.8.1部分。

内联块和内联元素之间的空格

4 个答案: