Question

我有一个具有以下结构的文件：

body {
  font-family: font;
  font-size: small;
  margin: 0px;
}
#main {
  font-size: 105%;
  padding: 15px;
  margin: 10px;
}

<div id="main">
  <h1>heading</h1>
  <p>paragraph</p>
</div>

如您所见，填充和边距在所有方面都设置为相同。但垂直填充（底部和顶部）看起来明显大于水平填充。为什么呢？

Answer 1

您需要重置h1和p标签的默认浏览器样式

h1, p {
    margin:0px;
    padding:0px;
}
body {
  font-family: font;
  font-size: small;
  margin: 0px;
}
#main {
  font-size: 105%;
  padding: 15px;
  margin: 10px;
}

Answer 2

<h1>和<p>附近有默认的垂直边距。

Answer 3

你的h1标签（默认情况下）有一点上边距。将此代码添加到您的CSS中以修复它：

h1 {margin-top: 0}

Answer 4

https://jsfiddle.net/

在前后自动划分空格。请参阅小提琴，看看取走div元素并将类添加到其他元素的结果。

Answer 5

因为您没有定位h1和p标记;您定位#main和body。这也是font-size不应该的原因。

标准规则现在比继承的规则更强大/更重要。

你可以简单地解决它。直接定位h1和p以及将来的元素，在!important或#main内写下body每条规则，或者定位所有内容：

body {
  font-family: font;
  font-size: small;
  margin: 0px;
}
#main > *{
  font-size: 105%;
  padding: 15px;
  margin: 10px;
}

垂直填充大于水平填充

5 个答案: