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
Post a Comment