Trying to fix gaps in between vertically aligned divs

Question

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/

possible duplicate of [A Space between Inline-Block List Items](http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items) — , Jul 01 '15 at 20:40

score 3 · Answer 1 · answered Jul 01 '15 at 20:45

3

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

JSfiddle demo

h3 {
    margin: 0;
}

answered Jul 01 '15 at 20:45

Paulie_D

95,305
9
106
134

Lucian Davidescu · Accepted Answer · 2015-07-01T20:54:03.327

1

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.

edited Jul 01 '15 at 20:54

answered Jul 01 '15 at 20:45

Lucian Davidescu

443
6
17

Thanks. If you accepted my answer you may at least give Paulie_D an upvote - his WAS quicker ;) – Lucian Davidescu Jul 01 '15 at 21:10
1

Hi, I tried to upvote both answers but I don't have enough reputation, I need 15 and I only have 3. Sorry! – Jul 01 '15 at 21:50

Trying to fix gaps in between vertically aligned divs

2 Answers2