Taking up space-Inline


display: Inline

Inline: In this section as I replaced the "display: inline-block" to "display: inline", my four blocks, red, blue, yellow, green, disappeared and instead I got a tiny black squire on top left corner of my screen. What have I done wrong?


Nothing, that is how inline work, taking up the least amount of spaces (only take the space its needs). If you would to add text to your divs:

<div>some text</div>

you should your divs. The black box you see now are the borders of all the divs


Thank you Stetim94. It perfectly make sense.