Box Model

What is the box model concept?

By FAM

In the last article, you learned how to select your HTML elements by using tags and combinators. Now, that you can select them, you can do exciting things.

The starting point of every HTML element styling…

The HTML styling story starts with a simple idea! Every HTML element can be considered as a box. In CSS language we call it box model.

You need to open up your imagination and see every box model element as a box that wraps around an HTML element. The box consists of the following:

• Box content— The HTML element itself without any style.
• Box padding — The space/ area around the content.
• Box border — A border that goes around the box content and padding
• Box margin — The space/ area outside the border.

Here is a mental picture (gif) to keep in your mind:

By FAM

In terms of CSS

To style the button example we need to add some space around the button, margin and padding’s space are transparent, in contrary to the border that…