inline-block和inline元素之间的空间 [英] Space between inline-block and inline element

问题描述

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

为什么只在 inline-block ？的右边有空格？

  span {background：red; padding：10px;} span：nth-​​child（2）{display：inline-block;}  

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

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

小提琴

解决方案

当内联元素的边界位于两个空格之间时，除去之后的空格（在内联元素之外），留下内联元素中的空格。在你的情况下，被裁剪的空间是分隔你的 span 元素的换行符。从规范：

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

4. 如果'white-space'设置为'normal'，'nowrap'或'pre-line'，
   
   
   
   
   2. 在另一个空格（U + 0020）之后的任何空格（U + 0020） - 甚至是内联之前的空格，如果该空格也有white-设置为normal，nowrap或pre-line。
   
   

请注意，这只适用于内联框，即 display：inline 元素 - 不是inline-blocks。为inline-block元素的内容添加空格不会导致后面的空格被折叠。

高度差主要与高度差有关，的内联元素vs内联块，这是一个整个主题本身。请参见 10.6.6 和 10.8.1 的规范。

I have an inline-block element, with inline elements on left and right.

Why there is white space only on the right of the inline-block?

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

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

Also, Why there is an one pixel height difference for inline-block element?

Fiddle

解决方案

When an inline element's boundary lies between two spaces the space that follows the boundary (outside the inline element) is removed, leaving the space within the inline element. In your case, the space that is trimmed off is the newline that separates your span elements. From the spec:

For each inline element (including anonymous inline elements), the following steps are performed, treating bidi formatting characters as if they were not there:

4. If 'white-space' is set to 'normal', 'nowrap', or 'pre-line',
   2. any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.

Note that this is only the case with inline boxes, i.e. display: inline elements — not inline-blocks. Appending a space to the content of your inline-block element will not cause the space after it to be collapsed away.

The height difference mainly has to do with how the height of inline elements vs inline-blocks is calculated, which is an entire topic in itself. See sections 10.6.6 and 10.8.1 of the spec.

这篇关于inline-block和inline元素之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！