why do these divs have spaces between them?

Question

This is the plan, i got one tab-wrapper, and inside of it, there's one tab-wrapper-top, and inside of that are three sections displayed in line. Why are there spaces between them ??

the html

<html>
    <head>
        <title>Informação pessoal</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>
    <body>
        <div class="tab-wrapper">
            <div id="tab-wrapper-top">
                <div id="tab-wrapper-left">
                    Left
                </div>
                <div id="tab-wrapper-middle">
                    Middle   
                </div>
                <div id="tab-wrapper-right">
                    Right
                </div>
            </div>
            <div class="separator"> Seperator </div>
            <div id="tab-wrapper-bottom"> Bottom wrapper</div>
        </div>
    </body>
</html>

the CSS

/* Tabs */

.tab-wrapper {
    position: absolute;
    top: 90px;
    width: 98%;
    margin: 0 auto auto;
    -webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
}


.tab-wrapper label {
    margin: 5px 10px 5px;
}

.tab-wrapper input {
    margin: 5px 10px 5px;
}

.tab-wrapper select {
    margin: 5px 10px 5px;    
}

.tab-wrapper textarea {
    margin: 5px 10px 5px;
    width: 90%;    
}

#tab-wrapper-top {
    display: block;
}

#tab-wrapper-left {
    display: inline-block;
    width: 43%;
    background-color: gray;
}


#tab-wrapper-middle {
    display: inline-block;
    width: 14%;
    background-color: blue;
}

#tab-wrapper-right {
    display: inline-block;
    background-color: green;
}

.separator {
    display: block;
    height: 30%;
    width: 100%;
    background-color: red;
}

Here is a jsfiddle for anyone looking to work on this: http://jsfiddle.net/m83d58rt/ — Adam, Aug 12 '14 at 16:37
duplicate of: http://stackoverflow.com/questions/5184512/cant-get-rid-of-spaces-between-inline-block-elements — Justin Carroll, Aug 12 '14 at 16:45

score 2 · Answer 1 · answered Aug 12 '14 at 16:39

2

HTML considers linebreaks to be whitespace. Consecutive linebreaks get collapsed into a single space. Try

<div>Left</div><div>
Middle</div><div>
Right</div>

instead. Note how the closing/opening tags are immediately adjacent to each other.

As it stands now, you've got

<div>Left</div>[linebreak][tab][tab]<div> etc...

The linebreaks/tabs collapse down to a single whitespace char equivalent, and push your divs apart.

answered Aug 12 '14 at 16:39

Marc B

356,200
43
426
500

i would have never figured this thing out ... thank you guys. Now i'm even more skeptical in webdesign cuz i thought white spaces in the code matter nothing. The way i'm using it now it's practically unreadable... – brunobliss Aug 12 '14 at 16:48
usually it doesn't. it's only when you're trying to exactly line up things together that it does matter. – Marc B Aug 12 '14 at 16:49
does this happen only in inline-block display? – brunobliss Aug 12 '14 at 16:53
1

no. happens on ALL elements. if there's whitespace in the html, you'll get whitespace in the rendered output. but it only becomes visible when you're going for pixel-perfect lineups and/or have different colors. you'd never have noticed the problem if you had white divs on a white background. – Marc B Aug 12 '14 at 16:54
yeah but the problem is the position gets screwed because of those white spaces, it was driving me mad cuz i couldn't figure out why inline would display like block. Thanks for all the help! – brunobliss Aug 12 '14 at 16:57

score 0 · Answer 2 · edited Aug 12 '14 at 16:46

It's because you have spaces in the code. Try this.

<html>
    <head>
        <title>Informação pessoal</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>
    <body>
        <div class="tab-wrapper">
            <div id="tab-wrapper-top">
                <div id="tab-wrapper-left">Left</div>
                <div id="tab-wrapper-middle">Middle</div>
                <div id="tab-wrapper-right">Right</div>
            </div>
            <div class="separator">Seperator</div>
            <div id="tab-wrapper-bottom">Bottom wrapper</div>
        </div>
    </body>
</html>

Just FYI, code blocks in questions and answers should be indented 4 spaces, not enclosed in backticks. This enables syntax highlighting, as well as avoiding the striped appearance of multiline backtick escaped code. — Michael Dorst, Aug 12 '14 at 16:49

why do these divs have spaces between them?

2 Answers2