在 div 类中指定元素时出现的问题
我正在自学网页设计。
我有一个 div 并且想为我的图标的背景添加颜色，所以我的 CSS 看起来像这样
.icon {
width: 50px;
height: 20px;
}
.icon h3 {
background-color: yellow;
}<div>
<h3> google </h3>
</div>这是它的外观：
但我希望它看起来像这样（不要介意字体）
为什么不自动将所有 h3 元素放在 div 中？
回答
至于你的问题的背景下，你需要知道，大多数HTML元素具有预定义的CSS规则，通常包括像margin，padding，line-height，display等等。默认情况下，这些定义会影响元素的外观和行为方式。因此，您需要使用浏览器的开发人员工具（在大多数浏览器上为 F12）并检查特定元素以查看应用了哪些样式。在您的特定情况下，可能影响的是h3元素的边距等。
在您的特定情况下，您可以在不使用div但仅使用h3元素的情况下实现您的需求。如果您需要div它也可以实现，但它会使事情复杂化一点，因为您必须关注两个元素而不是一个元素。
值得一提的是，对于此类元素，使用固定宽度和高度并不是一个好主意，因为文本的长度可能会有所不同，并且会导致图标看起来损坏。
这是两者的示例。
h3.icon {
width: 64px;
height: 20px;
display: inline-block;
background: yellow;
padding: 10px;
text-align: center;
border-radius: 4px;
}
.icon {
background: yellow;
padding: 10px;
display: inline-block;
width: 64px;
border-radius: 4px;
}
.icon h3 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}<h3>Google</h3>
<br>
<div>
<h3>Google</h3>
</div>