Question

由于某些原因，如屏幕截图所示，h1（discordbotgen）在右侧占用了很多空间，而在我的CSS中未指定。我不希望它占用空间，因为它会阻止其他元素进入那里。

.main-title {
  font-family: 'Comfortaa', cursive;
  font-size: 80px;
  color: #ededed;
  margin-bottom: 50px;
  margin-left: 150px;
  margin-top: 180px;
}

<h1 class="main-title">discordbotgen</h1>

h1没有任何父div，它的父是<body>。

Answer 1

<h1>默认为显示块-它将占据其包含元素的整个宽度。您可以将其浮动或使用inline-block来更改该功能。

p.s。如果您使用浮动，请不要忘记使用clearfix。 Clearfix

Answer 2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

默认情况下，<h1>是块级元素。除非您将其指定为inline-block，否则它将占用容器的整个宽度。

h1 {
  background: #f2f2f2;
}

<h1>Block Element</h1>

h1 {
  background: #f2f2f2;
  display: inline-block;
}

<h1>Block Element</h1>

标头（h1）在右侧占据了大量空间

2 个答案: