Week 3_3(en): The Box Model

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 Concept of 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:

1. Width and Height: width and height of the content area
2. Padding: amount of space between the content area and the border
3. Border: thickness and style of the border surrounding the content area and padding
4. Margin: amount of space between the border and the outside edge of the element

Height and Width

The content of an element has 2 dimensions: height and width.
By default, the dimensions of an HTML box are set to hold the raw contents of the box.
The CSS height and width properties can be used to modify these default dimensions.

First, let's add the following class to the <header> tag of our blog title.

class="blog-title"

The let's set the width and height of the .blog-title class like below.

.blog-title {
  background-color: orange;
  height: 200px;
  width: 500px;
}

The background-color property is added to check the size of the box.
On the browser, you will notice that the height and width have each been set to 200 and 500 pixels.
Pixels allow you to set the exact size of an element's box.
When the width and height of an element are set in pixels, it will be the same size on all devices. (Some elements that are sized according to the size of the laptop screen might overflow a mobile screen.)

Border

Borders are used to draw a line that surrounds an element.
Borders can be specified with the following three properties:

1. width: thickness of border (pixels or thin / medium / thick)
2. style: design of the border (includes none, dotted, solid) See all border styles
3. color: color of border (using built-in color keywords, RGB cubic-coordinate system, or HSL cylindrical-coordinate system)