在前端开发中，我们经常使用 CSS Reset 来重置浏览器的默认样式，以便更好地控制页面布局和样式。然而，使用 CSS Reset 后，我们可能会遇到一个常见的问题：文字影响高度。这篇文章将介绍这个问题的原因以及如何解决它。
问题描述
假设我们使用了以下 CSS Reset：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}然后在一个容器中添加了一些文本：
<div class="container"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, quae. Quod doloremque, facilis quae similique doloribus laboriosam minus ullam voluptates, minusque, architecto voluptatibus officiis quidem cumque illo aspernatur impedit! </div>
容器的高度应该是文本的高度加上 margin 和 padding 的总和。然而，由于我们使用了 CSS Reset，文本的高度可能会受到影响，导致容器的高度不正确。
问题原因
这个问题的原因是因为在默认情况下，浏览器会为文本设置一个默认的 line-height。然而，当我们使用 CSS Reset 时，这个默认的 line-height 将被重置为 0，因此文本的高度将变为 0，从而影响容器的高度。
解决方法
要解决这个问题，我们需要为文本设置一个正确的 line-height。通常，我们可以使用以下样式：
.container {
font-size: 16px;
line-height: 1.5;
}其中，font-size 表示文本的字体大小，line-height 表示文本的行高。通过设置一个正确的行高，我们可以确保文本的高度正确，从而避免影响容器的高度。
示例代码
下面是一个完整的示例代码，演示了如何解决 CSS Reset 后文字影响高度的问题：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --- ----- ------------------
-------
-- --- ----- --
- -
------- --
-------- --
----------- -----------
-
-- --------- ------ --
---------- -
---------- -----
------------ ----
------- -----
-------- -----
----------------- -----
-
--------
-------
------
---- ------------------
----- ----- ----- --- ---- ----------- ----------- -----
----- ----- ---- ----------- ------- ---- ---------
--------- ---------- ----- ----- -----------
--------- ---------- ------------ -------- ------
------ ---- ---------- --------
------
-------
-------结论
在前端开发中，使用 CSS Reset 是一个好习惯，可以帮助我们更好地控制页面布局和样式。然而，在使用 CSS Reset 时，我们需要注意文字影响高度的问题，确保文本的高度正确，从而避免影响容器的高度。通过设置一个正确的行高，我们可以轻松解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760f6dd03c3aa6a56078e61