使用 HTML 实体 (最常用、最推荐)
这是网页设计中控制空格最基础、最可靠的方法。 (Non-Breaking Space) 代表一个“不换行空格”，它和普通空格（按空格键产生的）最大的区别是：
（图片来源网络，侵删）
- 普通空格：如果一行文字过长，浏览器会自动换行，多个连续的普通空格会被合并显示为一个。
- 不换行空格 (
)：浏览器不会在此处换行，并且无论有多少个 ，都会被原样显示出来。
如何操作：
- 在 Dreamweaver 的“代码”视图中，直接输入
。 - 在“设计”视图中，你可以通过以下方式插入：
- 插入面板：确保你的插入面板切换到“文本”类别，点击“字符”下拉菜单，选择“不换行空格”。
- 快捷键：在 Windows 系统中，按
Ctrl + Shift + Space(或Ctrl + Alt + Space)，在 Mac 系统中，按Cmd + Shift + Space。注意：快捷键可能因 Dreamweaver 版本和操作系统设置而异。
优点：
- 兼容性极好：所有浏览器都支持。
- 精确控制：可以精确地增加一个或多个空格，效果稳定。
- 防止意外换行：非常适合在标题、价格、特定对齐等场景下使用。
缺点：
- 如果大量使用,会使代码变得冗长，可读性稍差。
- 它不是一个真正的“尺寸”单位，只是增加一个固定宽度的空格。
示例：
商品价格： ¥99.00
这段代码会在“价格：”和“¥99.00”之间产生三个普通空格大小的间隔。
（图片来源网络，侵删）
使用 CSS 的 margin 或 padding 属性 (最灵活、最专业)
这是现代网页设计的首选方法,通过 CSS（层叠样式表）来控制元素之间的间距，可以实现更灵活、更强大的布局控制。
如何操作：
- 在“设计”视图中，选中你想要增加间距的元素（例如一个段落
<p>或一个<div>）。 - 在“属性”面板中，找到“CSS”或“目标规则”部分，点击“编辑规则”。
- 在弹出的“CSS 规则定义”对话框中，选择“区块”或“方框”类别。
margin(外边距)：控制元素外部的间距，如果你想增加一个元素与另一个元素之间的距离，使用margin。- 给段落增加右边距：
margin-right: 20px;
- 给段落增加右边距：
padding(内边距)：控制元素内部内容与边框之间的距离，如果你想增加一段文字与其所在容器边框的距离，使用padding。- 给段落增加左边距：
padding-left: 30px;
- 给段落增加左边距：
优点：
- 灵活性高：可以精确控制上、下、左、右四个方向的间距。
- 响应式设计：可以结合媒体查询，在不同屏幕尺寸下使用不同的间距。
- 代码整洁：将样式与内容分离，便于维护。
- 单位丰富：可以使用
px,em,rem, 等多种单位，适应不同场景。
缺点：
（图片来源网络，侵删）
- 需要对 CSS 有一定的了解。
- 对于行内文字的微小调整,可能不如
直接。
示例： 给一个段落文本增加左边距，实现“首行缩进”效果：
p {
padding-left: 2em; /* 2em 相当于两个当前字体大小的宽度 */
}
使用 CSS 的 text-indent 属性 (专门用于首行缩进)
如果你只想增加段落第一行文本的缩进，这个属性是最佳选择。
如何操作：
- 选中目标段落。
- 打开“CSS 规则定义”对话框。
- 在“区块”类别中，找到“文本缩进”选项，输入你想要的值（
2em）。
优点：
- 目的明确：专门用于首行缩进，代码语义清晰。
- 效果稳定：效果与字体大小关联，使用
em单位可以适应字体大小的变化。
缺点：
- 只能控制首行,无法控制其他行或整个元素的间距。
使用全角空格 (适用于中文排版)
在中文排版中,一个全角空格的宽度等于一个中文字符的宽度，如果你需要在中文文本中插入一个“完整字符宽度”的空格，可以直接在输入法中切换到全角模式，然后按空格键。
如何操作：
- 大多数中文输入法都有全角/半角切换快捷键（搜狗输入法是
Shift + Space）。 - 切换到全角模式后,按空格键输入的就是全角空格。
优点：
- 在中文环境下,宽度与汉字完美匹配，视觉上非常协调。
- 输入方便。
缺点：
- 仅适用于需要与等宽中文字符对齐的场景,在纯英文或混合排版中可能不适用。
总结与建议
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
|
需要固定数量的空格。 防止文字意外断行（如价格、电话）。 简单、快速。 |
兼容性好，直接有效。 | 代码冗长，不灵活，非专业布局首选。 |
margin / padding |
元素与元素之间的间距。 元素内部内容与边框的间距。 所有需要精确控制布局的场景。 |
最专业、最灵活，支持响应式设计。 | 需要基础 CSS 知识。 |
text-indent |
专门用于段落首行缩进。 | 语义清晰，效果稳定。 | 功能单一，仅用于首行。 |
| 全角空格 | 中文排版中，需要一个完整汉字宽度的空格。 | 与汉字宽度匹配，视觉协调。 | 仅适用于特定中文场景。 |
给 Dreamweaver 新手的建议：
- 简单需求：如果只是想在几个字之间加几个空格，或者想让标题不换行，直接使用
是最快的方法。 - 布局需求：如果你想控制一个图片和一段文字之间的距离，或者一个块级元素与另一个块级元素之间的间距，请使用
margin。 - 内容内边距：如果你想增加一个文本框内部文字与边框的距离，请使用
padding。 - 中文排版：如果你在做中文网站，需要首行缩进，使用
text-indent；需要插入一个“汉字宽度的空格”，使用全角空格。
掌握这几种方法,你就能在 Dreamweaver 中游刃有余地处理各种间距问题了。
