react 中inline-block的間距去哪了？

create-react-app:

vue init:

html:

React 的 JSX 並不是真的 HTML/XML ，而只是創建元素的語法糖，兩個元素中間沒有空白節點。

jsx在創建真實的時候，元素之間是不會有間隙的，元素之間沒了間隙也就沒了間距。像下面這樣

JSX:

&123&
&123&


HTML:

&123&&123&


這其實是編譯器（解析器/轉換器）做的，翻譯的結果由jsx變成了js的createElement。

這樣做的好處是比較簡單，因為要處理語言中的空白符和注釋等會增加成本；另外最終html還有可能會遇到壓縮等情況，所以統一去掉了這些空白也有一些道理。不好的地方就如題主所說行內空白會有影響，但這是可以通過css辦到的。

另外像內部空白如pre元素里的空白是不應該去掉的，這個解析器不應該做不到。

雖然都是 JSX 語法，但是兩者的編譯器是不同的：React 是 Babel 處理的（babel-plugin-transform-react-jsx 插件），為了保證縮進不影響渲染結果因此會去除每行的前後空格，而 Vue 是自己寫的 html parser。

React 官方文檔描述如下：

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.

所以如果想保留空格可以寫在一行，如：

const elem = &
&hello& &world&
&

編譯後：

const elem = React.createElement(
"div",
null,
React.createElement(
"span",
null,
"hello"
),
" ",
React.createElement(
"span",
null,
"world"
)
);


https://github.com/facebook/react/issues/1643