CSS Box Model

Class Agenda

Introduction to CSS Box Model
Standard Box Model
Padding, margin, border
Alternative Box Model

1. Introduction to CSS Box Model

This section describes the CSS Box Model as a whole. It briefly covers the content, padding, border and margin. Moreover, the section explains the characteristics of an inline element and those of a block element. Furthermore, the students would learn how to find out what element they are working with via the browser dev tools. In summary, the section includes the following points:

The Box model is one of the fundamental concepts in CSS.
It is a key concepts for building complex CSS layouts
The box model consists of four building blocks: Content, Padding, Border and Margin
The characteristics of inline and block elements affect the usage of padding, border and margin.
The Padding and the Margin are transparent

ETA: 30min

2. Standard Box Model

Students will learn about the standard box model in which the width and the height are only applied to the content of the box. Moreover, students will practice working with the Chrome dev tools to identify the sizes of html elements.

ETA: 20min

3. Padding, Margin, Border

This section covers in detail the usage of the basic CSS rules around padding, border and margin. The sections below show what students will learn in relation with each piece of the box model.

Padding:

Where is padding used?
How to apply padding with the shorthand?
Is the padding transparent?
What are the possible padding values?
What are the different number of used values doing (e.g. 1 value, 2 values, 3 values, 4 values)?
How can we apply padding in only one direction (e.g. top, right, bottom, left)?

ETA: 7-10min

Margin:

Where is margin used?
How to apply margin with the shorthand margin property?
Is the margin transparent?
What are the possible values for margin property?
What are the different number of used values doing (e.g. 1 value, 2 values, 3 values, 4 values)?
How can we apply margin in only one side (e.g. top, right, bottom, left)?
What are negative margin values?
What is margin auto-collapse?
How can we center a box horizontally with margin auto?

ETA: 25min

Border:

When is border used?
How to apply border with the shorthand?
What are the directional rules for borders (e.g. top, right, bottom, left)?
What are the special styling rules for borders (e.g. width, style, color)?
How can we combine a direction and a style rule into one rule?
What is the border-radius rule?

ETA: 15min

4. Alternative Box Model

The students are also given an insight into the alternative box model and the corresponding box-sizing CSS property.

ETA: 5-10min

Exercise Description

Exercises should be done along with the content of the lecture. Students will practices with:

the different characteristics of the inline and block elements
padding
margin (as well as, negative margins, auto-collapse, horizontal centering)
border (border styles and border radius)

Glossary & Terminology

Box model - The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Margin - The size around the border of an html element.
Margin auto-collapse - If you have two elements whose vertical margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest individual margin.
Padding - The size between the content of an html element and its border.

Homework

Apply everything we have learned today on your websites. Improvise and design your websites as much as you can using the concepts we have learned in the past lectures. Before next lesson, we would like to see a screenshot of your page posted in the Classroom channel. Try to express yourself to the world by styling the website to your taste.
If you have any sort of question please ask in the Classroom channel