Removing Negative Margin

[TechnoBear]

Putting block div into css

You used inline block and that is automatically placed on the baseline just like text to allow room underneath for descenders. That also means you will get extra horizontal space between blocks just like the space between words. You should have floated the elements and avoided all these issues and all your verbose code as shown in my very first example which is still the correct answer to this layout.

Putting block div into css

It also means that the horizontal space between those elements cannot be guaranteed to be exactly the same between browsers as it will depend on things like font-size word-spacing and browser defaults. The space will also be affected if the tags touch as the white-space will be negated or if a parent has a different font-size of has display of table which kills the white-space in some browsers. However, in most cases the white space is not an issue unless you are going for pixel precision and …