两行文字背景色不相连

Question

我只是想让两个背景在它们的长边上相接触；就像这段代码一样，但是两个蓝色需要相接触。

我的代码：

.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}

<div class="header">
 <h1>Page Name!</h1>
 <h3>Subheading!</h3>
</div>

- Charlie Turner

Answer 1

您需要规范化CSS（覆盖默认的 padding 和 margin 属性状态）。

* {
  margin: 0;
  padding: 0;
}

.header h1 {
  background: #0060D3;
  padding: 10px;
  text-align: center
}

.header h3 {
  background: #00CBFF;
  padding: 10px;
  text-align: center
}

<div class="header">
  <h1>Page Name!</h1>
  <h3>Subheading!</h3>
</div>

- kind user

---

谢谢你的回答！只有一个问题，星号（*）到底是什么？它是整个文档的类名吗？ - Charlie Turner

@CharlieTurner *代表任何东西。它基本上选择所有元素。 - kind user

Answer 2

尽管Kind User的答案完美地解决了您的问题，但在下次遇到类似问题时，您仍会发现自己需要再次寻求帮助。因此，与其试图直接回答您的问题，我将解释如何自行解决。

您的浏览器将具有检查器（通常右键单击并从上下文菜单中选择检查）。我经常使用Firebug，这是一个扩展检查器，您可以安装为插件，但对于此任务来说并非必要，并且内置在您的浏览器中的检查器就足够了。

点击检查器左上角的按钮，它看起来像一个光标覆盖在一个方框上，然后单击屏幕上的任何元素进行选择。

您将看到在“规则”下显示当前影响该元素的所有CSS规则。选择“框模型”选项卡将允许您查看元素本身的大小以及每一侧的填充、边框和外边距。将光标悬停在元素上也会分别突出显示框模型的每个部分，因此您可以轻松地确定您看到的白色空间是边距的一部分。

为了测试这个理论，您可以返回到规则选项卡并创建一个新规则，声明margin:0px;，您将立即看到效果。这是一种在调整实际文件之前检查CSS更改的有效技术。

顺便提一下：仅供澄清，虽然我认为这是显而易见的，但我从不做出这样的假设。在检查器中进行的任何更改都是非持久性的，因为它们不会保存在您的文件中。如果您刷新页面，它将从文件重新加载，并且在检查器中进行的任何更改都将消失。

- Darren H