Unexpected space in between divs

Question

So I've been designing some simple header bars for my website, and I've just noticed that I have an unexpected space in between nested divs in the bar.

Here's how it's been going.

HTML

    <body>
    <div class='main-container'>

        <div class='button'>
            <p> Issues </p>
        </div>

        <div class='button'>
            <p> Calendar </p>
        </div>

        <div class='button'>
            <p> Staff </p>
        </div>

        <div class='button'> 
            <p> Submit </p>
        </div>

    </div>
</body>

... with this CSS

.main-container {
    width: auto;
    height: 40px;
    float: left;
    vertical-align: middle;
    font-family: 'Arial';
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    }

.button {
    text-align: center;
    display: inline-block;
    height: 100%;
    width: 100px;
    // borders are to illustrate spaces
    border-left: 1px solid black;
    border-right: 1px solid black;
    }

.button:hover {
    background-color: #D3D3D3;
    }

and it looks like this (since I don't have enough reputation, I'll have to do a simple graphical representation):

Is there a way to remove the spaces in between the divs?

score 0 · Answer 1 · answered Feb 16 '15 at 05:55

0

This is most likely due to to a margin on the body. A regular practice is to "reset" the inherited styles that every browser automatically adds.

This is a pretty common CSS reset.

answered Feb 16 '15 at 05:55

Ramsay Lanier

426
6
18

score 0 · Accepted Answer · answered Feb 16 '15 at 06:16

use float: left; for div button.

.button {
text-align: center;
display: inline-block;
float:left;
height: 100%;
width: 100px;
// borders are to illustrate spaces
border-left: 1px solid black;
border-right: 1px solid black;
}

I think it will solved your issue.

Unexpected space in between divs

2 Answers2