Question

即使在重新设置边距和填充后，h1标签在其内容之前和之后仍然存在神秘的无用空白

添加

 line-height:0.7em;

规则大致解决了问题，但是

看起来不干净
仍有少数不需要的像素
不确定这不会导致不同字体或单位的问题。

是否有一个干净且通用的解决方案，可能使用sass / less mixin进行数学运算？

HTML：

<h1>Some text</h1>

CSS

* { margin:0;padding:0; }
h1 { font-size:25em; }

Answer 1

默认情况下，h1标签具有line-heigth属性，您可以像

一样调整它

h1 {
font-size: 25em;
line-height: 0.7em;
}

更新示例

＆＃13;

* {
  margin:0;
  padding:0;
}
h1 {
  font-size:25em;
  line-height:0.7em;
}

＆＃13;

<h1>Some text</h1>
<p>lorem ispum</p>

＆＃13;

Answer 2

请确保您的css保证金规则：0;填充：0;是的。做它！重要只是为了测试。 line-height：1;应该解决问题（或行高：0）。您可以为h1元素设置高度

Answer 3

h1 {
      font-size:25em;
      background-color:pink;
      line-height:0.8;
    }

你可以做的只是添加行高

Answer 4

＆＃13;

h1.demo {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 40px;
  font-size: 40px;
}

＆＃13;

<h1 class="demo">Some Text</h1>

＆＃13;

Answer 5

由于library(iterators) df <- data.frame(a = sample(letters[1:26], 100, replace = TRUE), b = runif(100)) df.iter <- isplit(df, df$a, drop = TRUE)是块级元素，因此默认情况下它的边上有空格。你可以添加h1来摆脱它，但它的定位会受到影响。

Answer 6

在我的情况下，我找到的解决方案是，我设置了一个全局的 line-height 值，该值使其他所有东西都混乱了。甚至除此之外，我意识到就像空白和填充一样，元素甚至还有默认的行高值。

因此，您可以做的一件事是，设置其 “ line-height：normal” 或 “ line-height：initial” （针对单个元素，甚至只是针对整个元素）（）。

如果这行不通，只需手动输入似乎适合您的任何行高值即可，尽管这不是最佳解决方案。通常，这意味着您在某处具有一个行高设置，该设置会覆盖其他元素的行高设置，或者只是弄乱了与之共享边界的其他附近元素的间距。

H1标签前后的额外空间

6 个答案: