html - 垂直填充大于水平填充

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;
}