CSS - setting elements inline - part 1

I bet that every frontend developer met the problem with setting many elements in line. As lately I had to solve this problem during recruitment processes I decided to share some thoughts and solution.

Example structure:

<div class="container">
    <div class="color green"></div>
    <div class="color yellow"></div>
    <div class="color blue"></div>
    <div class="color red"></div>
</div>

Let's color elements to see them clearly:

.color {
    width: 25%;
    display: inline-block;
    height: 100px;
    padding: 0;
    margin: 0;
} .green {
    background-color: green;
}
.yellow {
    background-color: yellow;
}
.blue {
    background-color: blue;
}
.red {
    background-color: red;
}

So we have a container, which contains few elements, and looks like on this image:



So this is definitely not the goal. The inner elements should be in line and without gaps between. Why are there those gaps? The answer is display: inline-block;. Displaying inline takes all white spaces as a spaces... and spaces have width, so last element is going down, as there is no space for it. So how to remove gaps between elements?

change boxing-size:

div {
    boxing-size: border-box;
}