html空格使用技巧
<style>.artBox { font-size: 20px; margin: 30px auto; max-width: 1200px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }
.artBox h2 { color: #1a73e8; border-bottom: 2px solid #eee; padding-bottom: 8px; margin-bottom: 20px; }
.artBox > p { margin: 15px 0; line-height: 1.8; text-align: justify; }
.artBox blockquote { font-family: 'Consolas', 'Monaco', monospace; background: #f9f9f9; border-left: 4px solid #1a73e8; padding: 15px 20px; margin: 20px 0; color: #555; }
.artBox code { background: #eee; padding: 2px 6px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95em; }
.artBox .mid { text-align: center; }
</style>
<div class="artBox">
<p>请先看如下代码，并点击代码框右上角的“预览”按钮查看渲染效果，请特别留意文本框和它们前面说明文本的对齐方式：</p>
<div class="codebox" data-prev="1">
<style>
body { width: 100vw; height: 100vh; overflow: hidden; font-family: sans-serif; padding: 20px; display: grid; place-items: start center; }
.fit-container { width: fit-content; height: fit-content; padding: 2em 4em; text-align: center; border-radius: 10px; box-shadow: 4px 4px 8px rgba(0, 0, 0, .5); margin-top: 3em; }
.fit-container input { padding: 3px 4px; }
.fit-container button { padding: .25em 2em; }
</style>
<div class="fit-container">
<p>
<label>用 户 名 ：</label>
<input type="text" name="username" required>
</p>
<p>
<label>邮 箱 ：</label>
<input type="email" name="email" required>
</p>
<p>
<label>密 码 ：</label>
<input type="password" name="password" required>
</p>
<p>
<label>确认密码 ：</label>
<input type="password" name="password" required>
</p>
</div>
</div>
<p>从上述代码看，各文本框前面的说明文本<strong>字数</strong>并不一致，最长字数是 4 个，最短字数是 2 个，要实现上下完美对齐实际上并不是那么容易，需要对空格做特别的转义处理。不信的话请看如下代码和效果：</p>
<div class="codebox" data-prev="1">
<div>
<p>用户名 ：<input type="text" value="" placeholder="输入姓名"></p>
<p>密码 ：<input type="password" value="" placehhorder="输入密码"></p?
</div>
</div>
<p>上述示例，为了使得“密码”和“用户名”对齐，“密码”两字之间使用了两个自然空格即两次空格键输入字符，但预览效果会发现，此法并不能达成两行X方向的绝对对齐。解决的方法之一是使用等宽字体，这样的话一个自然空格的占位是半个汉字的一半；另一种方法是本文的重点：使用恰当的 HTML 空格转义符——</p>
<blockquote><pre><txt-Red>&ensp;</txt-Red> - 半角空格（半个汉字宽度）<br>
<txt-Red>&emsp;</txt-Red> - 全角空格（一个汉字宽度）<br><br>
<txt-Blue>&nbsp;</txt-Blue> - 自然空格（空格键输入的空格）<br>
<txt-Blue>&thinsp;</txt-blue> - 窄空格（em的六分之一宽）<br>
<txt-Blue>&zwnj;</txt-Blue> - 零宽不连字空格（非打印字符，抑制本来会发生的连字）<br>
<txt-Blue>&zwj;</txt-Blue> - 零宽连字空格（非打印字符，用于特殊语言文字排版）</pre></blockquote>
<p>就是说，本文的第一个代码示例里各文本框前面的说明文本如果用到空格，用的是上述列举的红色空格——根据字数选择其一，而非自然空格。至于代码框中渲染出来的空格，我们无法从中区分具体用了哪一个。</p>
</div>
<script>
function loadLineNumFile() {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
script.defer = true;
script.onload = () => addLineNumber();
document.head.appendChild(script);
}
loadLineNumFile();
</script> 这个只看出第一个例子里的是对齐的，第二个没对齐。看不出来使用了哪种空格呢。{:4_203:} No-Break Space
  En Space
  Em Space
  Thin Space
‌ Zero Width Non Joiner
‍ Zero Width Joiner
红影 发表于 2026-4-22 22:26
这个只看出第一个例子里的是对齐的，第二个没对齐。看不出来使用了哪种空格呢。
这两个例子就是要展现不同空格的使用所造成的差异。至于用哪一种类型的空格才能令文本的排版对齐，应依据具体文本状态进行选择。 也曾年轻 发表于 2026-4-23 08:18
{:4_190:} 马黑黑 发表于 2026-4-23 17:51
这两个例子就是要展现不同空格的使用所造成的差异。至于用哪一种类型的空格才能令文本的排版对齐，应依据 ...
原来空格有这样的作用。 红影 发表于 2026-4-29 16:38
原来空格有这样的作用。
不然就不会有这么多格式的空格 马黑黑 发表于 2026-4-29 19:47
不然就不会有这么多格式的空格
嗯嗯，不同的格式有不同的作用。 红影 发表于 2026-4-30 19:20
嗯嗯，不同的格式有不同的作用。
貌似是酱紫 马黑黑 发表于 2026-4-30 21:07
貌似是酱紫
原来空格还有这么多讲究的。 红影 发表于 2026-5-1 16:48
原来空格还有这么多讲究的。
当然 马黑黑 发表于 2026-5-1 18:35
当然
这么多的空格要多看几眼，混个脸熟。 红影 发表于 2026-5-2 16:07
这么多的空格要多看几眼，混个脸熟。
其实也没多少人能记全，用到时查一查就好 马黑黑 发表于 2026-5-4 17:10
其实也没多少人能记全，用到时查一查就好
嗯嗯，就算记不住也要知道不止一种。 红影 发表于 2026-5-4 20:39
嗯嗯，就算记不住也要知道不止一种。
对，知道个路数 马黑黑 发表于 2026-5-4 22:16
对，知道个路数
这个是最起码的{:4_187:} 红影 发表于 2026-5-4 22:57
这个是最起码的
同意 马黑黑 发表于 2026-5-5 08:59
同意
每次进来就加强一遍记忆{:4_173:} 红影 发表于 2026-5-5 22:42
每次进来就加强一遍记忆
支持
页:
[1]