时间戳

首页 > 解决方案 > 颜色未填充整个 div + 填充故障

html - 颜色未填充整个 div + 填充故障

问题描述

#header {
  background-color: #55ff00;
  border-bottom: solid 1px;
}
<div id="header">
      <p>Text</p>
</div>

背景颜色从文本向下填充到底部边框；文字上方没有任何内容。如何使背景颜色延伸到文本上方？

我发现有一种方法可以使用这个奇怪的故障。我添加padding: 1px了 CSS 和背景颜色，然后像我想要的那样一直向上扩展，但我认为代码不应该这样做。我进行了更多实验，发现它仅在 padding 高于 时才有效0.01953124912688509844105px。

这是在 Visual Studio Code 上。我在 repl.it 上复制了它，发现了一个不同的结果：（0.015624999534338px这些不是确切的数字，它一直在继续）。

我查了一下，发现与此错误有关的内容：https ://codepen.io/mikemadman/pen/XRdMZP

谁能解释这个故障？是否有一种正常的方法可以在不使用完整边框的情况下向上扩展颜色？

标签： htmlcssvisual-glitch

解决方案

1.重置默认浏览器填充和边距：

* {
  padding:0;
  margin:0;
}

2.在你需要的地方给你的元素填充或边距：

#header {
  padding: 15px 30px;
}

查看下面的演示：

* {
  padding:0;
  margin:0;
}
body {
  font-family: sans-serif;
}
#header {
  background-color: #55ff00;
  padding: 15px 30px;
}
<div id="header">
      <h1>Text</h1>
</div>

推荐阅读