Voiceover: Welcome back. 2 2
I will now quickly go over yet another 3 3
very important concept in CSS. 4 4
The box model. 5 5
So. 6 6
Basically, all HTML elements can be seen as boxes. 7 7
What the box model does 8 8
is to allow us to define space 9 9
between elements 10 10
and to add a border around elements. 11 11
The box model consists of margins, 12 12
padding, borders and actual content of the box. 13 13
For instance, text. 14 14
This image shows very well how the box model works. 15 15
So, 16 16
the content is where text and images appear. 17 17
Padding is like a transparent area around the content, 18 18
but inside of the box. 19 19
The border of the box 20 20
goes around the padding and the content. 21 21
It may be transparent, or not. 22 22
And finally, the margin is the space between boxes. 23 23
Now, padding, margin and border 24 24
are properties in CSS, 25 25
and can be specified for the entire box 26 26
or for individual sides. 27 27
Top, bottom, left or right. 28 28
We'll use all of them later. 29 29
The box model also allows us to set 30 30
the height and the width of an element. 31 31
Now, the annoying thing about the standard box model 32 32
that I just showed you 33 33
is that you just set the height 34 34
and the width of the content. 35 35
Not of the entire box itself. 36 36
This means that padding, margin and border 37 37
will be added to the height and width we specify. 38 38
Which is actually not what we want. 39 39
But fortunately, 40 40
we have a good solution for that. 41 41
There is this very useful CSS property 42 42
called box-sizing. 43 43
If we set box-sizing to border-box, 44 44
the height and the width 45 45
will be defined for the entire box. 46 46
We will use this in a second. 47 47
'Cause there is one last thing 48 48
I need to tell you about the box model. 49 49
In HTML, there are block elements 50 50
and inline elements. 51 51
Block elements use the full width of the browser 52 52
and force line breaks. 53 53
Headings and paragraphs are examples of block elements. 54 54
And inline elements don't do any of that. 55 55
For instance, 56 56
images, links, strong and em elements 57 57
are all inline elements. 58 58
What's important about them 59 59
is that you can either set their height or their width. 60 60
But enough with theory lectures. 61 61
Let's get our hands dirty with what we just learned 62 62
and get back to brackets. 63 63
As you can see, 64 64
on our web page 65 65
here in Google Chrome, 66 66
there are already some margins between elements. 67 67
For example this one here, 68 68
and this one. 69 69
It all full of margins, 70 70
already. 71 71
And that's because all browsers 72 72
add some default margins 73 73
if we don't specify any. 74 74
So let's start by remove the default values. 75 75
And to do that, 76 76
we create some rules 77 77
that will affect all elements on our web page, 78 78
using the asterisk selector. 79 79
Which goes like this. 80 80
So we just type this. 81 81
Now all elements are affected. 82 82
That's why you have these blue boxes here, 83 83
around all the elements. 84 84
This is a way of brackets showing us 85 85
that all these elements are affected 86 86
by this selector. 87 87
Now, here we've set all margins and paddings to 0. 88 88
And that's how it works. 89 89
Just write margin: 0; 90 90
and also padding: 0;. 91 91
So you see, all the margins completely disappeared. 92 92
Now, do you remember the box-sizing property? 93 93
We want to set it to border-box 94 94
for all elements. 95 95
And this is the right place 96 96
to do exactly that. 97 97
So. 98 98
Let's write box-sizing, 99 99
and then choose border-box. 100 100
Save it, 101 101
and alright. 102 102
So, no margins and no paddings anymore. 103 103
Now, I think we should add some margins 104 104
to some of the elements. 105 105
First, I would say 106 106
that the main heading needs some margin, right? 107 107
This main heading right here. 108 108
So remember. 109 109
Margin is the white space between boxes. 110 110
We want some margin these two headings, 111 111
the h1 and the h2 heading. 112 112
So we add a margin-bottom to the h1 element. 113 113
So if we remember, I said we could specify 114 114
the margins to all the sides of an element. 115 115
And so now, 116 116
I will specify the margin at the bottom. 117 117
And let's put 20px here. 118 118
That looks like a reasonable amount of white space here. 119 119
And now the same thing for the secondary headings. 120 120
Because, you know, I also don't like 121 121
that there's no space between the h2 element 122 122
and the paragraphs. 123 123
So it's again, margin-bottom. 124 124
And here, I think 10px might be enough. 125 125
Okay. 126 126
That looks much better, don't you think? 127 127
Finally, I would like to add some margin 128 128
after the main paragraphs. 129 129
So if you remember, 130 130
the main paragraphs are 131 131
this one 132 132
and this one. 133 133
And we defined it in the lecture before, 134 134
using this class here. 135 135
So again, margin-bottom. 136 136
And let's do it 20px. 137 137
So we get some nice spacing here. 138 138
So it looks a little bit cleaner right now. 139 139
And that's it for this lecture. 140 140
I hope you learned a lot about the box model. 141 141
Which is really, really important. 142 142
So if you didn't, just go back 143 143
and look at it again. 144 144
Because in the next lecture, 145 145
we will really need it 146 146
because we will start to build a simple layout, 147 147
where we will use the concept 148 148
that I showed you in this lecture. 149 149
So, 150 150
see you there.