Question

我定义了主样式表（我的项目的默认CSS），如下所示：

body {
    color: #000000;
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-size: 0.75em; /* 12px */
    line-height: 1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
    letter-spacing: 0.03em;
}

letter-spacing和line-height完美无缺。但是，我发现其中两个也会影响ul-li元素。我希望它们只影响文本而不是ul-li或任何其他元素。

我不知道字母间距和线高有任何副作用吗？如果是这样，我怎样才能使行高和字母间距仅影响文本？

Answer 1

您只能为<p>标记定义CSS，并将所有文本放在p元素中：

p {
    line-height:1.5;
}

Answer 2

但是，我发现其中两个也会影响ul-li元素。

所以只需为ul / li元素创建另一个选择器，使其恢复正常。

ul, li {
    letter-spacing:0em;
    line-height:1;
}

Answer 3

使用正文定义，您可以将样式应用于页面中的所有元素。尝试识别所需的文本元素，如div，a，span等，并创建一个新的css条目，如下所示：

body {
    color: #000000;
    text-align:center;
    margin: 0px;
    padding: 0px;
    font-size: 0.75em; /* 12px */
}
div, a, span {
    line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
    letter-spacing:0.03em;
}

或将具有特定键的单独样式应用于文本元素。

Answer 4

为什么不在体型后将ul li元素重置回默认的行高？

body {
  color: #000000;
  text-align:center;
  margin: 0px;
  padding: 0px;
  font-size: 0.75em; /* 12px */
  line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
  letter-spacing:0.03em;
}

ul, ul li {
  line-height: 1;
  letter-spacing: 0em;
}

Answer 5

您可以在line-height元素上将letter-spacing和normal设置回li：

li {
    letter-spacing: normal;
    line-height: normal;     /* this is actually 0em */
}

字母间距和行高不仅影响文本元素

5 个答案: