html5 - CSS border-bottom line not directly under text -


i started learning html5 in congruence css, , trying make own resume (exercise codecademy). issue subheading divs planning make, trying place black line underneath subheading text. there large gap in between line , 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>

if want sides of div straight, remove property border-radius: 5px;. space between line , subheader due property - height: 100px; in .subheader div. remove property , problem fixed. make closer subheader, have delete border bottom property. after that, make new div , @ properties below.

#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;  }  .line {    margin-top: -20px;    height: 1px;    width: 100%;    background-color: black;  }
<!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="line">        <div class="left"></div>      <div class="right"></div>      <div id="footer"></div>  </body>    </html>


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -