在进行前端开发时，为了让不同浏览器呈现出相似的效果，我们经常会使用 CSS Reset 来重置默认样式。然而，在使用 CSS Reset 过程中，我们很容易遇到空格问题。
问题分析
空格问题主要是因为浏览器对于HTML和CSS的解析机制不同所导致的，具体可分为以下几种情况：
1. input、button样式初始空格问题
当我们应用某些CSS Reset后，input或button等样式元素中会多出一些空格，导致这些元素的显示出现问题。例如下面这段代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ------------
-------
------
------ ------------
------------ -- - ---------------
-------
-------我们通常在 CSS Reset 中会写入以下代码，来清除默认样式：
input,button{margin:0;padding:0;}但是，在应用这个 CSS Reset 后，我们会发现 input 和 button 元素中会多出一些空格，导致元素显示不正常。这是由于浏览器在解析这些元素时，会给它们默认的 padding 和 border，所以我们在清除 margin 和 padding 后，也需要清楚默认的 border 才能解决这个问题。
input,button{margin:0;padding:0;border:none;}2. ul、ol样式初始空格问题
同样的，在应用 CSS Reset 后，ul、ol 等元素也会多出一些空隙。这也是由于浏览器的默认样式导致的。在 CSS Reset 出现前，我们会使用以下样式清除 ul 和 ol 元素中间的间隙：
ul,ol{margin:0;padding:0;list-style:none;}
ul li,ol li{list-style-position:inside;}但是这样并不能达到我们清除间隙的目的，我们还需要将 ul 和 li 之间的空格清除掉。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ------------
-------
------------------------------------------
-- ----- -------------------------------
-- ------------------- -------------------------------
-- ------------------ ---------------------------------
--------
-------
------
----
------ ------------- ---- ----------
------ ------------- ---- ----------
------ ------------- ---- ----------
-----
-------
-------这个样式可以通过选择直接包裹 li 的元素第一个和最后一个子元素的 margin 来解决空格问题。
3. table 样式初始空格问题
table 元素也经常会出现空格问题，比如下面的代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ------------
-------
--------------------------------
------------- ----- ------------------------
--------
-------
------
-------
----
-------- ---------
-------- ---------
-----
----
-------- ---------
-------- ---------
-----
--------
-------
-------这里，浏览器会为 table 元素添加默认的 border 和 padding，这会导致表格显示的不正常。我们可以通过设置 border-collapse 属性来解决这个问题。
table{border-collapse:collapse;}当然，如果你需要添加表格的边框，那么也可以在 td 中添加 border 样式。
解决方法
综上所述，当我们在使用 CSS Reset 时，为了解决空格问题，需要对一些元素特别加以注意，具体方法包括：
- 清除 input、button 元素的默认 padding 和 border 样式。
- 去除 ul、ol 元素中的空格，即清除 ul 和 li 之间的 margin。
- 设置 table 元素的 border-collapse 属性，并根据需要设置 td 的 border 样式。
通过这些方法，可以完美解决 CSS Reset 中的空格问题。
总结
CSS Reset 是前端开发中必不可少的重置默认样式的方法，但使用不当会导致空格问题的出现，影响我们页面的布局和样式。为了解决这个问题，我们需要了解具体情况，采用相应的方法进行解决。掌握这些方法，可以帮助我们更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647310e9968c7c53b0096791