blank space between divs even though margin and padding are set to 0

Question

i am trying to build a css framework for my personal use.
i have experienced this problem before on other projects but managed to fix it by altering the code. i have no idea why this happens

html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

*{
    box-sizing:border-box;
}

.row{
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.col-sm-1,.col-md-1,.col-lg-1{
    margin:0;
    padding:0;
    display:inline-block;
    width:4.16667%;
    border:1px solid black;
}

    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
    </div>

as you can see in the code snippet there is blank space when you run therefore resulting in less divs in the row. i tried inspecting it with chrome but the blank space shows as part of the body. i have literally no margins and no paddings at all

The solution is the same, regardless of whether it’s `inline-block` or something else. — Sebastian Simon, Feb 24 '17 at 23:47

Psi · Answer 1 · 2021-04-28T21:16:26.410

7

The problem is the white space between inline-blocks.

<div style="display:inline-block">A</div> <!-- There is a white-space here --><div style="display:inline-block">B</div>

You can avoid this by packing the divs together seamlessly (although ugly):

<div style="display:inline-block"></div
><div style="display:inline-block></div>

This eliminates the spaces between the tags which actually do get parsed!

Another way to avoid this is instead of

display:inline-block

using

float:left

which, however, requires a

clear:both

on the container, to prevent layout issues.

edited Apr 28 '21 at 21:16

answered Feb 24 '17 at 23:46

Psi

6,387
3
16
26

float:left fixes it, but why would i want clear: both? that just puts them on new lines. i do not want that, anyway thank you :) – red security Feb 24 '17 at 23:50
after all floating content you should set an element with clear:both, otherwise the following content may be placed somewhere... – Psi Feb 24 '17 at 23:53
Always put `clear: both` on the container of floated elements, otherwise you'll have serious layout issues. – gilbert-v Oct 02 '19 at 11:00

score 2 · Answer 2 · answered Feb 24 '17 at 23:47

Changed to display:block and float:left; and works fine.

html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

*{
    box-sizing:border-box;
}

.row{
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.col-sm-1,.col-md-1,.col-lg-1{
    margin:0;
    padding:0;
    display:block;
    float:left;
    width:4.16667%;
    border:1px solid black;
}

    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
    </div>

blank space between divs even though margin and padding are set to 0

2 Answers2