Does anybody know how to reduce the space of an hr to the element above? My current style looks like this:

hr.hrabt { border: 5px solid black; border-radius: 5px; width: 7%; margin-left: 0; }

As result, I get following:

I would like it o look like this though: I already tried several things not working, like setting the top margin to 0.

Thank you for your help!

CodePudding user response：

Have you tried to remove the margin About text? Or change line-height of the About text.

CodePudding user response：

You can make the margin 0. Maybe this can work.

h1{
  margin-bottom: 0;
}
hr{
  margin-top: 0;
}

CodePudding user response：

You might consider drawing the rule with CSS instead of an <hr>. You'll have more control over its appearance and position and your html will be cleaner:

nav a {
  display: inline-block;
}

nav a::after {
  content: '';
  display: block;
  height: 2px;
  width: 150%; /* relative to the text */
  border-radius: 2px;
  background: red;
  margin-top: 2px; /* adjust to control vertical distance from the text */
}

<nav>
  <a>About</a>
</nav>

CodePudding user response：

method 1 using margins

Add margin-top:0 to your hr's CSS and margin-bottom:0 to the About CSS.

hr {
  margin-top: 0;
  border: 5px solid black;
  border-radius: 5px;
  width: 7%;
  margin-left: 0;
}

span {
  margin-bottom: 0;
}

<span>About</span>
<hr>

method 2 using absolute positioning

hr {
  position: absolute;
  top: 10px;
  border: 5px solid black;
  border-radius: 5px;
  width: 7%;
  margin-left: 0;
}

.container {
  position: relative;
  outline: 1px solid;
}

<div >
  <span>About</span>
  <hr>
</div>