CSS面试题：消除子元素的间距？

在CSS中，将字体大小设置为 0 是一种常见的技巧，用于消除子元素之间的多余间距。这种技巧主要与行内元素（inline elements）的特性有关，特别是在处理由多个行内元素组成的布局时。

1. 问题背景：行内元素的间距问题

在HTML中，行内元素（如 <span>、<a>、<img> 等）会根据其父元素的字体大小产生间距。这种间距是由字体的行高（line-height）和字母间距（letter-spacing）决定的。当多个行内元素并排时，这些间距会导致布局问题。

例如：

<div class="container">
    <span>Item 1</span><span>Item 2</span><span>Item 3</span>
</div>

即使没有显式设置 margin 或 padding，这些 <span> 元素之间也可能出现意外的间距。

2. 为什么设置字体大小为 0？

将父元素的字体大小设置为 0，可以消除这些由字体特性引起的间距。这是因为：

• 行高（line-height） 和 字母间距（letter-spacing） 是基于字体大小计算的。
• 当字体大小为 0 时，这些间距也会被压缩到最小，从而消除多余的空白。

3. 具体应用

在你的代码中：

.header .search form {
    margin-top: 42px;
    font-size: 0; /* 设置字体大小为0，用于消除子元素的间距 */
}

这里，font-size: 0 的作用是消除 <form> 内部的 <input> 和 <button> 元素之间的多余间距。这些元素虽然是块级元素（<input> 和 <button> 默认为 display: inline-block），但它们仍然会受到父元素字体大小的影响。

4. 其他方法

除了设置 font-size: 0，还有其他方法可以解决行内元素的间距问题：

• 使用 display: block 或 display: flex：将子元素设置为块级元素或使用 Flexbox 布局，可以完全避免行内元素的间距问题。
• HTML代码中移除空白字符：通过移除HTML代码中的空白字符（如换行符、空格）来减少间距，但这会影响代码的可读性。
• 设置 letter-spacing 或 word-spacing：直接调整字母间距或单词间距，但这通常不如设置 font-size: 0 简单。

5. 总结

将字体大小设置为 0 是一种简单且有效的技巧，用于消除行内元素之间的多余间距。它通过压缩行高和字母间距来实现，特别适用于需要紧密排列子元素的场景。

在实际开发中，这种方法常用于：

• 水平导航菜单。
• 图片画廊。
• 搜索框和按钮的组合。