The CSS Box Model
What is the Box Model?
Every element that is displayed on a web page consists of one or more rectangular boxes. The CSS box model typically shows how these rectangular boxes are laid out on a web page. Each box can have different properties and interact with each other in different ways, but what’s important to note is that every box has a content area and optional surrounding padding, border, and margin areas.
Padding is a transparent space between the element’s content and its border. Sometimes the element does not have a visible border*
Margin, on the other hand, is the transparent space around the border.
The CSS box model with box-sizing
The box model also allows us to set the height and width of an element. One thing to note is that when you set the height and width of an element in the standard box model shown above, you are setting the height and width of the content and not the entire box itself. This means that padding, margin, and the border will be added to the height and the width we specify. Well, that is probably not what we want but we have a solution for that. There is a very useful CSS property called box-sizing. If we set the box-sizing to border-box, the height and the width will be defined for the entire box.
Also important:
In HTML there are block elements and inline elements. Block elements use the full width of the browser and force line breaks. Headings and paragraphs are examples of block elements*. Inline elements don’t do any of that — for instance; images, links strong and em elements.
It is very important to understand the box model before jumping into learning CSS. One resource I used that has helped me understand the concept better is the Udemy course — Build Responsive Real World Websites with HTML5 and CSS3. I would recommend this course if you want to learn the basics of CSS and go into advanced topics.
