Vincent Vincent - 3 months ago 7
CSS Question

CSS border-bottom line not directly under text

I just started learning HTML5 in congruence with CSS, and I am trying to make my own resume (exercise from Codecademy). My issue is with the subheading divs I am planning to make, where I am trying to place a black line underneath the subheading text. There is large gap in between the line and text, however.



#header {
margin-top: -3.5px;
background-color: #C3CDD4;
height: 90px;
width: 98.5%;
position: relative;
}

#name {
font-family:Verdana, Geneva, sans-serif;
font-size: 40px;
float: left;
margin-left: 20px;
margin-top: 20px;
/*padding bottom: 50px;*/
}

#address {
font-family: Verdana, Geneva, sans-serif;
float:right;
margin-top: 25px;
margin-right: 60px;
}

#contact {
font-family: Verdana, Geneva, sans-serif;
float: right;
clear: left;
margin-top:-60px;
margin-right: 20px;
}

.subheader {
position: relative;
height: 100px;
margin-left: 20px;
margin-top: -2.5px;
font-size: 20px;
font-family: Verdana;
border-bottom: 1px solid;
}

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name"> Vincent William Barker </p>
<p id="address">67294 Washington Way</p>
<p id="contact">999.999.9999 · vwbarker@gmail.com</p>

</div>

<div class="subheader">
<h4 class="subheader_title">Education</h4>

</div>


<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>




Answer

If you want the sides of your div to be straight, remove the property border-radius: 5px;. The space between your line and the subheader was due to this property - height: 100px; in your .subheader div. Remove that property and your problem will be fixed.

#header {
  margin-top: -3.5px;
  background-color: #C3CDD4;
  height: 90px;
  width: 98.5%;
  position: relative;
}

#name {
  font-family:Verdana, Geneva, sans-serif;
  font-size: 40px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  /*padding bottom: 50px;*/
}

#address {
  font-family: Verdana, Geneva, sans-serif;
  float:right;
  margin-top: 25px;
  margin-right: 60px;
}

#contact {
  font-family: Verdana, Geneva, sans-serif;
  float: right;
  clear: left;
  margin-top:-60px;
  margin-right: 20px;
}

.subheader {
  position: relative;
  margin-left: 20px;
  margin-top: -2.5px;
  font-size: 20px;
  font-family: Verdana;
  border-bottom: 1px solid;
}
<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title></title>
  </head>
  <body>
    <div id="header">
      <p id="name"> Vincent William Barker </p>
      <p id="address">67294 Washington Way</p>
      <p id="contact">999.999.9999 · vwbarker@gmail.com</p>

    </div>

    <div class="subheader">
      <h4 class="subheader_title">Education</h4>

    </div>


    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>
  </body>
</html>