CODEWITHSUNDEEP
css
Do Not Track Me
Do Not Track Me

Reputation: 2286

why do modern browsers still put spaces between inline block if there is whitespace

If you have markup like this:

<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>

and css like this: .inlineblock{ display: inline-block; }

You will get spaces between the elements. about 4px of space. unless your markup looks like this:

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

Now, what i would like to know is WHY?

What is the technical reason that "good" browsers still do this, even the latest Firefox, Chrome, and Opera at the time of this posting still do this. I assume there is a technical reason behind it, otherwise it would have been fixed by now?

Thanks!

Upvotes: 6

Views: 731

Answers (4)

Love Trivedi
Love Trivedi

Reputation: 4046

This is The solution.

   <style>
    * {
    border:0;
    margin:0;
    padding:0;
    box-shadow:0 0 1px 0px silver;
    }
    .foo {
    width: 100%;
    }
    .bar {
    width: 50%;
    float:left;
    text-align: center;
    }
    </style>
    <div class="foo">
        <div class="bar">
            ...a new customer
        <!-- the whitespace between the following divs affects rendering - why? -->
        </div> <div class="bar">
            ...an existing customer
        </div>
    </div>

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

There's a better way of removing the white space than setting font size to zero (as that method has unpleasant side effects). You can word-spacing instead:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

section {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

div {
    width: 100px; 
    height: 40px; 
    background: #e7e7e7;
    padding: 10px;
    display:inline-block;
    word-spacing:0; /* reset from parent*/
}

</style>
</head>
<body>
<section>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</section>          
</body>
</html>

Upvotes: 0

gustavohenke
gustavohenke

Reputation: 41440

Well, there are spaces between them!

For a fix, try using font-size: 0 in the parent element.

Upvotes: 4

SLaks
SLaks

Reputation: 887469

This is exactly what they should do.

Spaces between inline elements are no different from spaces between words.

If you don't want that, use block elements, or set the font size to zero.

Upvotes: 19

Related Questions