为什么 hr 标签底部有额外的空白？

Question

why there is additional white space at the bottom of the hr tag?i wrapped my code with div tag but it has
the white space at the bottom of the hr element. i want to remove the white space after the hr element.

 { text-decoration: none; } body { background-color: #181818; color: white; } h1 { text-align: center; color: #3ea6ff; }.home { font-size: 3em; background-color: white; width: 100%; } #night { color: #f34601; } #mare { color: #3ea6ff; } #left { display: inline-block; width: 100%; background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%); height: 2px; border: 0; }

 <div class="home logo"> <h1 id="mare"> <span id="night">Night</span> mare </h1> <hr id="left"> </div>

Answer 1

Try display:block instead of inline-block .

 { text-decoration: none; } body { background-color: #181818; color: white; } h1 { text-align: center; color: #3ea6ff; }.home { font-size: 3em; background-color: white; width: 100%; } #night { color: #f34601; } #mare { color: #3ea6ff; } #left { display: block; width: 100%; background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%); height: 2px; border: 0; }

 <div class="home logo"> <h1 id="mare"> <span id="night">Night</span> mare </h1> <hr id="left"> </div>

Or try display:flex

 { text-decoration: none; } body { background-color: #181818; color: white; } h1 { text-align: center; color: #3ea6ff; }.home { font-size: 3em; background-color: white; width: 100%; } #night { color: #f34601; } #mare { color: #3ea6ff; } #left { display: flex; width: 100%; background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%); height: 2px; border: 0; }

 <div class="home logo"> <h1 id="mare"> <span id="night">Night</span> mare </h1> <hr id="left"> </div>

Simply removing display will also work as hr is a block element by default.

 { text-decoration: none; } body { background-color: #181818; color: white; } h1 { text-align: center; color: #3ea6ff; }.home { font-size: 3em; background-color: white; width: 100%; } #night { color: #f34601; } #mare { color: #3ea6ff; } #left { width: 100%; background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%); height: 2px; border: 0; }

 <div class="home logo"> <h1 id="mare"> <span id="night">Night</span> mare </h1> <hr id="left"> </div>