html空格使用技巧

马黑黑

请先看如下代码，并点击代码框右上角的“预览”按钮查看渲染效果，请特别留意文本框和它们前面说明文本的对齐方式：

<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>

从上述代码看，各文本框前面的说明文本字数并不一致，最长字数是 4 个，最短字数是 2 个，要实现上下完美对齐实际上并不是那么容易，需要对空格做特别的转义处理。不信的话请看如下代码和效果：

<div> <p>用户名 ：<input type="text" value="" placeholder="输入姓名"></p> <p>密 码 ：<input type="password" value="" placehhorder="输入密码"></p? </div>

上述示例，为了使得“密码”和“用户名”对齐，“密码”两字之间使用了两个自然空格即两次空格键输入字符，但预览效果会发现，此法并不能达成两行X方向的绝对对齐。解决的方法之一是使用等宽字体，这样的话一个自然空格的占位是半个汉字的一半；另一种方法是本文的重点：使用恰当的 HTML 空格转义符——

    - 半角空格（半个汉字宽度）

    - 全角空格（一个汉字宽度）


    - 自然空格（空格键输入的空格）

  - 窄空格（em的六分之一宽）

‌   - 零宽不连字空格（非打印字符，抑制本来会发生的连字）

‍    - 零宽连字空格（非打印字符，用于特殊语言文字排版）

就是说，本文的第一个代码示例里各文本框前面的说明文本如果用到空格，用的是上述列举的红色空格——根据字数选择其一，而非自然空格。至于代码框中渲染出来的空格，我们无法从中区分具体用了哪一个。

红影

这个只看出第一个例子里的是对齐的，第二个没对齐。看不出来使用了哪种空格呢。