All HTML elements can be considered as boxes. In CSS, the term“box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Box Model
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
If you’re ever confused about how this is working on your website, you can see an example of it in the dev tools. Open up the inspector and scroll to the bottom, you should be able to see the below, where you can hover over each item.
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
Positioning with Basic CSS
Here are some basic principles.
When you’re creating CSS layouts, you’ll often position things with one of 5 terms:
static
relative
fixed
absolute
sticky
You address this in the following manner:
div {
position: static;
}
If you’d like to follow along, create an HTML document…
The Box Model
Positioning with Basic CSS
div {position: static;}<!DOCTYPE html><html><head> <link rel="stylesheet" href="assets/css/main.css"></head><body> <h1 class="title">Hello</h1> <div class="static"> </div> <div class="relative"> </div> <div class="absolute"> </div> <div class="fixed"> </div>