Week 3_3(en): The Box Model
The box model is an important concept to understand how elements are positioned and displayed on a website. Let's learn about the box model!
The main concept of the box model is that all elements on a web page are interpreted by the browser as "living" inside of a box.
Essentially, a web page is a collection of boxes.
The box model includes the content area's size(width and height) and the element's padding, border, and margin.
The above image is a visual representation of the box model.
Each of the properties specify the following:
- Width and Height: width and height of the content area
- Padding: amount of space between the content area and the border
- Border: thickness and style of the border surrounding the content area and padding
- Margin: amount of space between the border and the outside edge of the element