html - Trying to fix gaps in between vertically aligned divs -
i trying align divs there 6 ontop of eachover, spreading across whole height of page, text centered inside. example here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
now nothing have worked far works, , extends page. have made div (to change text in of these boxes) surrounds them, , has value of height: 100vh;
. reason, there appear gaps in between divs. have stripped code down have portfolio div, still has gap above it.
here code:
<!doctype html> <html> <head> <meta charset="utf-8"> <style> body { margin: 0; padding: 0; top: 0; } { padding: 0; margin: 0; text-decoration: none; color: black; } .navigation-bar { float: left; width: 350px; font-size: 40px; height: 100vh; text-align: center; } .portfolio { background-color: #909090; height: 16%; line-height: 16%; } .twitter { background-color: #a0a0a0; height: 16%; } .git-hub { background-color: #909090; height: 16%; } .email { background-color: #a0a0a0; height: 16%; } .linkedin { background-color: #909090; height: 16%; } .about-me { background-color: #a0a0a0; height: 16%; } </head> <body> <div class="navigation-bar"> <a href="#"> <div class="portfolio"> <h3>portfolio</h3> </div> </a> <a href="#"> <div class="twitter"> <h3>twitter</h3> </div> </a> <a href="#"> <div class="git-hub"> <h3>github</h3> </div> </a> <a href="#"> <div class="email"> <h3>email</h3> </div> </a> <a href="#"> <div class="linkedin"> <h3>linkedin</h3> </div> </a> <a href="#"> <div class="about-me"> <h3>about me</h3> </div> </a> </div> </body> </html>
thanks help, , don't have high enough reputation post images appreciate if edit it!
edit: here fiddle: https://jsfiddle.net/tobiasyeomans/8yslounf/
it's because of h3 - browsers give default margin. adding h3 {margin:0;}
should want.
*or .navigation-bar h3 {margin:0}
if don't want mess rest of layout.
Comments
Post a Comment