前端 CSS 面试题, 为什么 li 与 li 元素之间有看不见的空白间隔?如何解决?

Step 1

Q:: 为什么 li 与 li 元素之间有看不见的空白间隔？

A:: li 元素之间的看不见的空白间隔是由于 HTML 中的换行符或空格字符所引起的。这种情况通常发生在你将 li 元素分布在多个行时，因为浏览器会将这些换行符和空格视为文本节点，从而在渲染时产生空白间隔。

Step 2

Q:: 如何解决 li 元素之间的空白间隔？

A:: 有几种方法可以解决这个问题： 1. 移除换行符和空格：在 li 元素之间不要使用换行符和空格，所有的 li 元素都写在同一行上。 2. 使用 HTML 注释：在 li 元素之间的换行处插入注释，避免生成空白节点。 3. **设置父元素的 font-size**：将 ul 或 ol 元素的 font-size 设置为 0，然后再针对 li 元素恢复正常的 font-size。 4. 使用 flexbox 布局：为 ul 或 ol 元素应用 display: flex;，这样可以消除 li 元素之间的空白。

Step 3

Q:: 在 CSS 中如何解决元素之间的空白问题？

A:: 除了 li 元素之外，其他内联或内联块元素之间也可能会因为换行符或空格而产生空白间隔。解决方法与 li 元素类似，可以通过移除换行符、使用注释、设置父元素的 font-size 为 0、或者使用 flexbox 或 grid 布局来消除空白。