CSS Inline-block remove white space

Question

I need a single container that's separated into three distinct areas with different backgrounds. I've got code that uses DIV to approximate this but the height and width is not right.

FIDDLE

<div class="container">
    <div class="wrap">
        <div class="square" id="square1">1</div>
        <div class="square" id="square2">2</div>
        <div class="square" id="square3">3</div>
    </div>
</div>

What I'm looking for is three "blocks" with different background colors that fill the width of the "container" (in this case a DIV), this looks like this:

There are multiples solutions [here](http://davidwalsh.name/remove-whitespace-inline-block), [here](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) and [here](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) ;) — lmgonzalves, Sep 20 '15 at 00:12
Set the width of your container to 240px given 3*80px = 240px and you get the above result (http://jsfiddle.net/1nqqtopo/4/) — urban, Sep 20 '15 at 00:36

score 0 · Answer 1 · answered Sep 20 '15 at 00:19

0

simple answer add inline block to your container, and remove the width:

.container{
    border: 1px solid black;
    display: inline-block;
}

http://jsfiddle.net/1nqqtopo/3/

answered Sep 20 '15 at 00:19

Destination Designs

673
1
5
17

score 0 · Answer 2 · answered Sep 20 '15 at 00:24

When you give display: inline-block; it generates spaces in-between them. Use the same code this way:

<div class="container">
    <div class="wrap">
        <div class="square" id="square1">1</div><!--
     --><div class="square" id="square2">2</div><!--
     --><div class="square" id="square3">3</div>
    </div>
</div>

CSS Inline-block remove white space

2 Answers2