CODEWITHSUNDEEP
htmlpositioning
brunobliss
brunobliss

Reputation: 366

why do these divs have spaces between them?

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;
}

Upvotes: 2

Views: 93

Answers (2)

racecarjonathan
racecarjonathan

Reputation: 1234

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>

Upvotes: 0

Marc B
Marc B

Reputation: 360772

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.

Upvotes: 2

Related Questions