Everything is a box!

Let’s start from the assumption that every HTML element when it is rendered inside the DOM is rendered as a box. Then you can start adding content or some style to make it look fancier. In the beginning, this is how our boxes actually look for the browser:

The blue rectangle represents the content size, which could be specified by the height or width property or could fit on the size of the children.

The **_green _**rectangle is the padding, which pushes all the elements contained in the box towards the inside. Internal spacing.

The **_light orange _**rectangle is the border of the box.

The **_dark orange _**rectangle is the external margin, it pushes the elements around the box further away.

These 4 dimensions, combined together, represent the physical space that our box occupies: _height/width + padding + border + margin = actual space. _However,This CSS box model is not so intuitive.

#grid #display #z-index #css #flexbox