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

我有一个

内联块

元素，左右两侧都有

内联

元素

为什么

内联块的右侧只有空白


span{
背景：红色；
填充：10px；
}
跨度：第n个孩子（2）{
显示：内联块；
}
内联
内联块
inline
如果在第一个跨距中删除单词
inline
后的空白，则会有一个空格


span{
背景：红色；
填充：10px；
}
跨度：第n个孩子（2）{
显示：内联块；
}
内联
内联块
inline
如果在第一个跨距中删除单词
inline
后的空白，则会有一个空格


span{
背景：红色；
填充：10px；
}
跨度：第n个孩子（2）{
显示：内联块；
}
内联
内联块
内联
默认情况下，内联元素周围有小空格，空格大小由字体大小决定。。若要实现无空格效果，需要在包装元素上将字体大小重置为0，请选中“编辑的小提琴”


内联
内联块
内联
跨度{
背景：红色；
填充：10px；
字体大小：13px；
}
跨度：第n个孩子（2）{
显示：内联块；
}
.包裹{
字号：0；
}
默认情况下，内联元素周围有小空格，空格大小由字体大小决定。。若要实现无空格效果，需要在包装元素上将字体大小重置为0，请选中“编辑的小提琴”


内联
内联块
内联
跨度{
背景：红色；
填充：10px；
字体大小：13px；
}
跨度：第n个孩子（2）{
显示：内联块；
}
.包裹{
字号：0；
}
因为在
内联块
元素上，元素之间的空间实际上在屏幕上是可见的，在您的OP中，
span
元素之间有空白：


span{
背景：红色；
填充：10px；
}
跨度：第n个孩子（2）{
显示：内联块；
}
inline-inline-blockinline
因为在
inline-block
元素上，元素之间的空间实际上在屏幕上是可见的，并且在您的OP中，
span
元素之间有空白：


span{
背景：红色；
填充：10px；
}
跨度：第n个孩子（2）{
显示：内联块；
}
inline-inline-blockinline
当内联元素的边界位于两个空间之间时，边界后面的空间（内联元素外部）将被删除，而内联元素内的空间将被保留。在您的例子中，被修剪的空间是分隔
span
元素的换行符。从：

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

如果“空白”设置为“正常”、“nowrap”或“前置行”，
在另一个空格（U+0020）之后的任何空格（U+0020）-即使是内联之前的空格，如果该空格的“空白”也设置为“正常”、“nowrap”或“pre-line”-将被删除

请注意，这仅适用于内联框，即
display:inline
元素，而不是内联块。在内联块元素的内容中添加空格不会导致折叠后的空格消失

高度差异主要与如何计算内联元素与内联块的高度有关，这本身就是一个完整的主题。请参见规范的第和节。
当内联元素的边界位于两个空间之间时，边界后面的空间（内联元素外部）将被删除，而内联元素内部保留空间。在您的例子中，被修剪的空间是分隔
span
元素的换行符。从：

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

如果“空白”设置为“正常”、“nowrap”或“前置行”，
在另一个空格（U+0020）之后的任何空格（U+0020）-即使是内联之前的空格，如果该空格的“空白”也设置为“正常”、“nowrap”或“pre-line”-将被删除

请注意，这仅适用于内联框，即
display:inline
元素，而不是内联块。在内联块元素的内容中添加空格不会导致折叠后的空格消失

高度差异主要与如何计算内联元素与内联块的高度有关，这本身就是一个完整的主题。请参阅规范的章节和。
以及，高度差异如何？好的，我不知道。对不起，您必须手动设置
高度
，以使其大小相同。在本例中，
17px
。（填充增加了总高度的
20px
）@afelixjand，高度差呢？好的，我不知道，对不起。你必须手动设置
高度才能使它们的大小相同。在本例中，
17px
。（填充在总高度上增加了
20px
。@afelixj
<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;
}