CODEWITHSUNDEEP
htmlcssalignment
Måns Nilsson
Måns Nilsson

Reputation: 451

Unwanted white-space between elements

Why does the following CSS code create white-space between the end of the blue (middle) element and the last (right) element?

    <!DOCTYPE html>
    <html lang="sv">
    <head>
    <meta charset="utf-8" />
    <title>A test page</title>
    <style type="text/css">
    body {
        margin: auto;
    }
    .tte {
        width: 20%;
        height: 50%;
        background-color: green;
    }
    .as {
        width: 60%;
        height: 50%;
        background-color: blue;
    }
    .ground {
        position: absolute;
        top: 0;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .middle {
        left: 20%;
    }
    </style>
    </head>
    <body>
    <div class="tte ground left"></div>
    <div class="tte ground right"></div>
    <div class="as ground middle"></div>
    </body>
    </html>

I expect the code to create two green block elements, each with width 20% and height 50%, aligned in the left top corner and the right top corner respectively, and a blue block element aligned right in the middle with width 60% and the same height. But there is noticeable white-space between the end of the blue element and the beginning of the last (right) green element. Why?

Upvotes: 1

Views: 254

Answers (1)

kthornbloom
kthornbloom

Reputation: 3720

EDIT: Have you tried using display:table-cell? Like this? http://jsfiddle.net/RGZZL/1/

.wrapper {
    display:table;
    height:300px;
    width:100%;
}

.left, .right {
    display:table-cell;
    width:20%;
    background:green;
}
.middle {
    display:table-cell;
    width:60%;
    background:blue;
}

--

I don't see the issue you're talking about, but try this. Put a wrapper around the divs, and set the font-size and line-height to zero on that one. Then reset the font-size and line-height for the three divs inside. I've found that sometimes a space in your code can make the browser think you have a space character in there which adds whitespace.

Upvotes: 1

Related Questions