1. 普通空格(ASCII 空格)
符号:键盘直接输入的空格(` `)。
行为:在 HTML 中,多个连续空格会被合并为一个,换行符也会被视为空格。
示例:
html

Hello World
显示为 "Hello World" >
2. HTML 实体空格
` `(Non-Breaking Space)
用途:强制显示一个不可合并的空格,防止换行。
示例:
html
Hello World
显示为 "Hello World" >
` `(En Space)
宽度:约为字母 "n" 的宽度(1/2 em)。
用途:排版对齐(如表格、标题)。
` `(Em Space)
宽度:约为字母 "m" 的宽度(1 em)。
用途:段落缩进或大间距对齐。
` `(Thin Space)
宽度:较窄的空格,用于分隔数字或符号(如 `10 000` 或 `5 %`)。
3. Unicode 空格字符
零宽空格(Zero Width Space):`` 或 `&8203;`
用途:在不插入可见空格的情况下允许换行。
全角空格:` `(中文排版常用,宽度与一个汉字相同)。
4. CSS 控制空格
通过 CSS 的 `white-space` 属性控制空格和换行的行为:
`white-space: normal`:默认(合并空格)。
`white-space: pre`:保留空格和换行(类似 `` 标签)。
`white-space: nowrap`:禁止换行。
`white-space: pre-wrap`:保留空格但允许自动换行。
html
custom-space {
white-space: pre;
Hello World
显示为 "Hello World" >
5. URL 中的空格
在 URL 中,空格需要编码为:
`%20`(标准编码)。
`+`(在查询参数中常见,如表单提交)。
示例:`
何时使用哪种空格?
普通空格:默认场景。
` `:需要强制显示多个连续空格时。
` `/` `:精细排版(如表格、公式)。
CSS `white-space`:保留文本格式(如代码块)。
URL 编码:处理链接或表单数据时。
注意:过度使用 ` ` 可能导致响应式布局问题,建议优先用 CSS 控制间距。