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 to look like this though: I already tried several things not working, like setting the top margin to 0.

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>