Css 人力资源要素的填充不一致

我有两个

hr

元素，并将每个元素设置为具有不同的类（因此我可以为其中一个元素设置一个特殊的

margin-bottom

值）。我想知道为什么填充声明只对第一个（类为“top”）生效。有什么想法吗

查看完整代码

HTML:

输出：

---

两个

标记的填充类似。您只需要在使用边框顶部和边框底部之间切换

这：

应成为：

hr.top {
  border-bottom: 1px solid #9d9c9c;
}

检查下面的工作代码段

hr.top{
边框底部：1px实心#9d9c9c；
宽度：4em；
填充：3em；
}
人力资源部{
边缘底部：5em；
边框顶部：1px实心#9d9c9c；
宽度：4em；
填充：3em；
}

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

填充对

.top

和

.bottom

类都有效。您看不到预期结果的原因是边界在填充区域的外部渲染，并且它不会影响您想要达到的间距。以下是“计算”框模型预览的屏幕：

请使用边距而不是填充来设置元素外部的适当间距

在您的情况下，它将是：

hr.top,
hr.bottom {
  border-top: 1px solid #9d9c9c;
  width: 10em;
}

hr.top {
  margin-bottom: 5em;
}

hr.bottom {
  margin: 5em auto;
}

---

另外，在“检查”元素的同时，查看“计算”选项卡，并阅读一些内容以更好地理解。

我没有答案，但我只想说这是一个组织良好且深思熟虑的问题。非常感谢。

hr.top {
  border-top: 1px solid #9d9c9c;
}

hr.top {
  border-bottom: 1px solid #9d9c9c;
}

hr.top,
hr.bottom {
  border-top: 1px solid #9d9c9c;
  width: 10em;
}

hr.top {
  margin-bottom: 5em;
}

hr.bottom {
  margin: 5em auto;
}