Question

＆＃13;

.Menu {
  background-color: black;
  height: 500px;
  margin: none;
  padding: none;
  border: none;
}
.Menu h1 {
  color: White;
  border: 5px solid white;
  font-size: 50px;
  text-align: center;
  font-family: 'Indie Flower', cursive;
}

＆＃13;

<div class="Menu">
  <h1>Home</h1>
</div>

＆＃13;

Here the menu is getting bordered with the header tag

我如何仅对第一个标题边框进行边框处理，但也不对菜单进行边框处理？为什么会这样？

Answer 1

它没有在整个菜单周围添加边框，它按预期运行。 h1是块级元素，因此它将是其父容器的宽度。这就是为什么边界在h1文本周围，但一直延伸到边缘。

如果你想在“主页”这个词的周围，你可以将display:inline-block添加到h1样式，这样会将边框紧紧包裹在h1周围。如果您需要稍高或更宽，请使用padding。

Answer 2

添加

display: inline-block;

到您的H1标签

等级而不是其元素

2 个答案: