CODEWITHSUNDEEP
htmlcss
user5071254
user5071254

Reputation:

Trying to fix gaps in between vertically aligned divs

I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:

http://gyazo.com/871760197e572bd35d79ac3be63d9869

Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.

Here is the code:

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">

 <style>
        body {
    margin: 0;
    padding: 0;
    top: 0;
}

a {
    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 for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!

Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/

Upvotes: 1

Views: 35

Answers (2)

lucian
lucian

Reputation: 681

It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.

*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114991

You need to remove the built-in margin from the heading.

JSfiddle demo

h3 {
    margin: 0;
}

Upvotes: 3

Related Questions