Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,652 --> 00:00:03,071
Welcome back.
2
2
00:00:03,071 --> 00:00:05,177
I will now quickly go over yet another
3
3
00:00:05,177 --> 00:00:07,677
very important concept in CSS.
4
4
00:00:08,543 --> 00:00:09,710
The box model.
5
5
00:00:11,967 --> 00:00:13,000
So.
6
6
00:00:13,000 --> 00:00:17,167
Basically, all HTML elements can be seen as boxes.
7
7
00:00:18,180 --> 00:00:19,602
What the box model does
8
8
00:00:19,602 --> 00:00:21,882
is to allow us to define space
9
9
00:00:21,882 --> 00:00:23,273
between elements
10
10
00:00:23,273 --> 00:00:26,824
and to add a border around elements.
11
11
00:00:26,824 --> 00:00:29,308
The box model consists of margins,
12
12
00:00:29,308 --> 00:00:33,666
padding, borders and actual content of the box.
13
13
00:00:33,666 --> 00:00:35,249
For instance, text.
14
14
00:00:36,549 --> 00:00:41,293
This image shows very well how the box model works.
15
15
00:00:41,293 --> 00:00:42,846
So,
16
16
00:00:42,846 --> 00:00:46,723
the content is where text and images appear.
17
17
00:00:46,723 --> 00:00:50,823
Padding is like a transparent area around the content,
18
18
00:00:50,823 --> 00:00:52,656
but inside of the box.
19
19
00:00:53,645 --> 00:00:55,193
The border of the box
20
20
00:00:55,193 --> 00:00:57,631
goes around the padding and the content.
21
21
00:00:57,631 --> 00:01:00,131
It may be transparent, or not.
22
22
00:01:01,135 --> 00:01:05,543
And finally, the margin is the space between boxes.
23
23
00:01:05,543 --> 00:01:08,126
Now, padding, margin and border
24
24
00:01:09,368 --> 00:01:11,745
are properties in CSS,
25
25
00:01:11,745 --> 00:01:14,939
and can be specified for the entire box
26
26
00:01:14,939 --> 00:01:17,735
or for individual sides.
27
27
00:01:17,735 --> 00:01:19,985
Top, bottom, left or right.
28
28
00:01:21,439 --> 00:01:23,772
We'll use all of them later.
29
29
00:01:25,970 --> 00:01:28,757
The box model also allows us to set
30
30
00:01:28,757 --> 00:01:32,574
the height and the width of an element.
31
31
00:01:32,574 --> 00:01:36,145
Now, the annoying thing about the standard box model
32
32
00:01:36,145 --> 00:01:37,939
that I just showed you
33
33
00:01:37,939 --> 00:01:39,775
is that you just set the height
34
34
00:01:39,775 --> 00:01:42,178
and the width of the content.
35
35
00:01:42,178 --> 00:01:44,595
Not of the entire box itself.
36
36
00:01:45,577 --> 00:01:48,833
This means that padding, margin and border
37
37
00:01:48,833 --> 00:01:53,578
will be added to the height and width we specify.
38
38
00:01:53,578 --> 00:01:56,970
Which is actually not what we want.
39
39
00:01:56,970 --> 00:01:58,544
But fortunately,
40
40
00:01:58,544 --> 00:02:00,850
we have a good solution for that.
41
41
00:02:00,850 --> 00:02:03,661
There is this very useful CSS property
42
42
00:02:03,661 --> 00:02:05,161
called box-sizing.
43
43
00:02:06,177 --> 00:02:09,053
If we set box-sizing to border-box,
44
44
00:02:09,053 --> 00:02:11,021
the height and the width
45
45
00:02:11,021 --> 00:02:14,320
will be defined for the entire box.
46
46
00:02:14,320 --> 00:02:16,737
We will use this in a second.
47
47
00:02:18,393 --> 00:02:20,047
'Cause there is one last thing
48
48
00:02:20,047 --> 00:02:23,190
I need to tell you about the box model.
49
49
00:02:23,190 --> 00:02:26,193
In HTML, there are block elements
50
50
00:02:26,193 --> 00:02:27,860
and inline elements.
51
51
00:02:28,949 --> 00:02:32,432
Block elements use the full width of the browser
52
52
00:02:32,432 --> 00:02:34,463
and force line breaks.
53
53
00:02:34,463 --> 00:02:38,630
Headings and paragraphs are examples of block elements.
54
54
00:02:40,889 --> 00:02:44,494
And inline elements don't do any of that.
55
55
00:02:44,494 --> 00:02:45,650
For instance,
56
56
00:02:45,650 --> 00:02:48,733
images, links, strong and em elements
57
57
00:02:50,076 --> 00:02:52,076
are all inline elements.
58
58
00:02:53,139 --> 00:02:54,890
What's important about them
59
59
00:02:54,890 --> 00:02:59,057
is that you can either set their height or their width.
60
60
00:02:59,948 --> 00:03:02,485
But enough with theory lectures.
61
61
00:03:02,485 --> 00:03:05,347
Let's get our hands dirty with what we just learned
62
62
00:03:05,347 --> 00:03:07,430
and get back to brackets.
63
63
00:03:09,198 --> 00:03:10,543
As you can see,
64
64
00:03:10,543 --> 00:03:12,342
on our web page
65
65
00:03:12,342 --> 00:03:14,619
here in Google Chrome,
66
66
00:03:14,619 --> 00:03:18,407
there are already some margins between elements.
67
67
00:03:18,407 --> 00:03:20,208
For example this one here,
68
68
00:03:20,208 --> 00:03:21,291
and this one.
69
69
00:03:22,817 --> 00:03:24,828
It all full of margins,
70
70
00:03:24,828 --> 00:03:25,749
already.
71
71
00:03:25,749 --> 00:03:28,061
And that's because all browsers
72
72
00:03:28,061 --> 00:03:29,806
add some default margins
73
73
00:03:29,806 --> 00:03:32,289
if we don't specify any.
74
74
00:03:32,289 --> 00:03:36,127
So let's start by remove the default values.
75
75
00:03:36,127 --> 00:03:37,307
And to do that,
76
76
00:03:37,307 --> 00:03:38,848
we create some rules
77
77
00:03:38,848 --> 00:03:41,891
that will affect all elements on our web page,
78
78
00:03:41,891 --> 00:03:44,224
using the asterisk selector.
79
79
00:03:45,663 --> 00:03:47,413
Which goes like this.
80
80
00:03:48,400 --> 00:03:50,688
So we just type this.
81
81
00:03:50,688 --> 00:03:53,188
Now all elements are affected.
82
82
00:03:54,358 --> 00:03:57,858
That's why you have these blue boxes here,
83
83
00:03:59,094 --> 00:04:01,094
around all the elements.
84
84
00:04:02,310 --> 00:04:04,344
This is a way of brackets showing us
85
85
00:04:04,344 --> 00:04:06,795
that all these elements are affected
86
86
00:04:06,795 --> 00:04:08,212
by this selector.
87
87
00:04:09,218 --> 00:04:13,002
Now, here we've set all margins and paddings to 0.
88
88
00:04:13,002 --> 00:04:14,691
And that's how it works.
89
89
00:04:14,691 --> 00:04:16,441
Just write margin: 0;
90
90
00:04:19,204 --> 00:04:20,954
and also padding: 0;.
91
91
00:04:24,866 --> 00:04:29,259
So you see, all the margins completely disappeared.
92
92
00:04:29,259 --> 00:04:32,683
Now, do you remember the box-sizing property?
93
93
00:04:32,683 --> 00:04:34,588
We want to set it to border-box
94
94
00:04:34,588 --> 00:04:35,968
for all elements.
95
95
00:04:35,968 --> 00:04:37,945
And this is the right place
96
96
00:04:37,945 --> 00:04:39,932
to do exactly that.
97
97
00:04:39,932 --> 00:04:40,765
So.
98
98
00:04:41,852 --> 00:04:43,769
Let's write box-sizing,
99
99
00:04:45,482 --> 00:04:47,732
and then choose border-box.
100
100
00:04:50,820 --> 00:04:52,287
Save it,
101
101
00:04:52,287 --> 00:04:53,287
and alright.
102
102
00:04:54,777 --> 00:04:58,027
So, no margins and no paddings anymore.
103
103
00:04:59,079 --> 00:05:01,216
Now, I think we should add some margins
104
104
00:05:01,216 --> 00:05:03,713
to some of the elements.
105
105
00:05:03,713 --> 00:05:05,342
First, I would say
106
106
00:05:05,342 --> 00:05:09,549
that the main heading needs some margin, right?
107
107
00:05:09,549 --> 00:05:12,099
This main heading right here.
108
108
00:05:12,099 --> 00:05:13,390
So remember.
109
109
00:05:13,390 --> 00:05:16,723
Margin is the white space between boxes.
110
110
00:05:17,982 --> 00:05:20,901
We want some margin these two headings,
111
111
00:05:20,901 --> 00:05:23,494
the h1 and the h2 heading.
112
112
00:05:23,494 --> 00:05:27,161
So we add a margin-bottom to the h1 element.
113
113
00:05:28,674 --> 00:05:31,338
So if we remember, I said we could specify
114
114
00:05:31,338 --> 00:05:34,921
the margins to all the sides of an element.
115
115
00:05:36,596 --> 00:05:37,513
And so now,
116
116
00:05:39,519 --> 00:05:42,852
I will specify the margin at the bottom.
117
117
00:05:45,886 --> 00:05:47,886
And let's put 20px here.
118
118
00:05:51,129 --> 00:05:55,296
That looks like a reasonable amount of white space here.
119
119
00:06:00,282 --> 00:06:03,904
And now the same thing for the secondary headings.
120
120
00:06:03,904 --> 00:06:07,011
Because, you know, I also don't like
121
121
00:06:07,011 --> 00:06:10,522
that there's no space between the h2 element
122
122
00:06:10,522 --> 00:06:12,105
and the paragraphs.
123
123
00:06:13,521 --> 00:06:16,600
So it's again, margin-bottom.
124
124
00:06:16,600 --> 00:06:19,850
And here, I think 10px might be enough.
125
125
00:06:22,051 --> 00:06:23,211
Okay.
126
126
00:06:23,211 --> 00:06:27,028
That looks much better, don't you think?
127
127
00:06:27,028 --> 00:06:30,347
Finally, I would like to add some margin
128
128
00:06:30,347 --> 00:06:32,514
after the main paragraphs.
129
129
00:06:33,503 --> 00:06:34,642
So if you remember,
130
130
00:06:34,642 --> 00:06:36,237
the main paragraphs are
131
131
00:06:36,237 --> 00:06:37,497
this one
132
132
00:06:37,497 --> 00:06:39,125
and this one.
133
133
00:06:39,125 --> 00:06:42,348
And we defined it in the lecture before,
134
134
00:06:42,348 --> 00:06:44,181
using this class here.
135
135
00:06:45,892 --> 00:06:47,892
So again, margin-bottom.
136
136
00:06:49,404 --> 00:06:51,154
And let's do it 20px.
137
137
00:06:52,847 --> 00:06:56,270
So we get some nice spacing here.
138
138
00:06:56,270 --> 00:07:00,005
So it looks a little bit cleaner right now.
139
139
00:07:00,005 --> 00:07:02,157
And that's it for this lecture.
140
140
00:07:02,157 --> 00:07:05,338
I hope you learned a lot about the box model.
141
141
00:07:05,338 --> 00:07:07,743
Which is really, really important.
142
142
00:07:07,743 --> 00:07:09,738
So if you didn't, just go back
143
143
00:07:09,738 --> 00:07:11,431
and look at it again.
144
144
00:07:11,431 --> 00:07:13,022
Because in the next lecture,
145
145
00:07:13,022 --> 00:07:14,629
we will really need it
146
146
00:07:14,629 --> 00:07:18,808
because we will start to build a simple layout,
147
147
00:07:18,808 --> 00:07:21,225
where we will use the concept
148
148
00:07:22,096 --> 00:07:24,949
that I showed you in this lecture.
149
149
00:07:24,949 --> 00:07:25,954
So,
150
150
00:07:25,954 --> 00:07:27,121
see you there.
11625
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.