Unwanted space when creating color blocks

Hi, I’m in the challenge of creating my WebSite Style Guide and I have one question. Why are there spaces between my color blocks? I didn’t put any margin for the Divs elements which are creating the blocks.

Here an image, notice the space between the colors, looks like there is a margin-bottom and margin-left/right.

Maybe is the “diplay: inline-block;” line, but if that, how can I avoid that?

Here is part of my code in HTML:

<header>My WebSite Style Guide</header>

    <main>
        <section class="color">
            <div class="firstDiv">
                <div class="one">Dark Blue <br> #01578C</div>
                <div class="two">Soft Blue <br> #29D8DB</div>
                <div class="three">Green <br> greenyellow</div>
            </div>

        </section>

This is all my code in CSS:

*{
    margin: 0;
    padding: 0;
}

*{
    box-sizing: border-box;
}

header{
    margin: 10px 100px;
}
/* ------------------------------------------------------color------------------------------------------------------------- */
.color{
    border: 5px solid gray;
    margin: 10px 100px;
}

.firstDiv .one{
    display: inline-block;
    border: 10px solid #01578C;
    background-color: #01578C;
    border-radius: 5%;
    
}
.firstDiv .two{
    display: inline-block;
    border: 10px solid #29D8DB;
    background-color: #29D8DB;
    border-radius: 5%;
    
}
.firstDiv .three{
    display: inline-block;
    border: 10px solid greenyellow;
    background-color: greenyellow;
    border-radius: 5%;
    
}

I believe it’s your border taking up space, consider using outlines if you want to avoid this.

From mdn:

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element’s content.
2 Likes

Hey there @omy.lara! :grinning:

It is being caused by your display: inline-block;

inline-block adds space between itself and other elements, that is based on the font-size of the parent container. It cannot be overridden with margin, padding, or border.

There are a few solutions, a couple of them are:

  1. Use float: left; on the first two boxes.

  2. Set the font-size of the parent container to 0 or 0px, and the set the childrens font-size back to something like 18px.

Here is a good article on it: Spacing between elements with display: inline-block;

1 Like

Ahhh. Thanks for that!! I haven’t used much inline-block so I didn’t catch it…

2 Likes

To be honest it took me about half an hour messing with the code, on repl.it, to find out what was going on, and then a quick Google just to confirm what I thought. :wink:

1 Like

Great!!! I got it.

I just added float: left; as you said, and for the space beneath the boxes I added margin-bottom: -0.5px;.

The article you talked about (CSS Display Inline-Block Extra Margin/Space) helped me a lot.

Thank you!

2 Likes