这种标签后面有空白是怎么一回事啊?

标签后面有空白是怎么回事啊?
图片.png

阅读 1.4k
1 个回答

如果两个行内元素标签贴在一起,那它们的内容也会贴在一起:

<span>aaa</span><span>bbb</span>

但是如果它们之间有空白字符,包括换行、tab、空格这些:

<div>
    <span>aaa</span>
    <span>bbb</span>
</div>

渲染的时候中间就会多一个 空白文本节点

具体表现就是,有个空格

image.png

然而很多时候我们不希望有这个空格,所以 firefox 的开发者工具会用 whitespace / 空白 来提醒你这里有个 仅空白的文本节点

如果不希望有这个空格,贴在一起写就可以了哦

PS 在一些有 mustache 语法的框架里(比如 Vue),也会有空白的问题

<MyComp
    :prop="value"
>
    {{ ... }}
</MyComp>

要避免空格经常会这么写(或者被 prettier 强迫这么写):

<MyComp
    :prop="value"
>{{ ... }}</MyComp>

PPS 这种问题百度就可以得到答案哦

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏