WEBVTT FILE





1
00:00:06.410 --> 00:00:13.670
in this video we're going to learn the box model alright so let's go to our

2
00:00:13.670 --> 00:00:20.850
project folder and go to CSS and let's open the previous file directly without

3
00:00:20.850 --> 00:00:27.779
using brackets okay so in the openings here okay

4
00:00:27.779 --> 00:00:35.640
let's click right and go to inspect element all right so let's select the

5
00:00:35.640 --> 00:00:43.440
yellow box for Apple okay what we is seen here represents the box model the

6
00:00:43.440 --> 00:00:51.000
blue part is showing the content of the ativ and then following the contents

7
00:00:51.000 --> 00:00:55.680
we've got a padding which is defining the distance between the content and the

8
00:00:55.680 --> 00:01:02.309
border and then reverse the border which we cannot see on the page because we

9
00:01:02.309 --> 00:01:06.180
haven't set it we haven't set any width for the border and also following the

10
00:01:06.180 --> 00:01:11.520
border we've got a margin which separates the HTML elements from

11
00:01:11.520 --> 00:01:17.009
elements around it okay so this is the box model all HTML

12
00:01:17.009 --> 00:01:23.720
elements they follow the box model okay so this box model is for the Apple div

13
00:01:23.720 --> 00:01:32.220
okay if we open the div and we select the paragraph now it's going to be

14
00:01:32.220 --> 00:01:42.860
different so the contents is this from here to here so you can see no padding

15
00:01:42.860 --> 00:01:49.140
no water but there is a margin and we can see here that the margin is 16

16
00:01:49.140 --> 00:01:57.270
pixels in terms of width so the margin for paragraphs is set by default okay so

17
00:01:57.270 --> 00:02:05.310
this this margin is set by default to 16 pixels okay so this is it's regarding

18
00:02:05.310 --> 00:02:11.520
the box model in the next few videos we're gonna learn how to set the

19
00:02:11.520 --> 00:02:16.590
different parts of the box we're gonna start with the padding and

20
00:02:16.590 --> 00:02:21.270
then we're gonna go to the border and and also there is an element's that is

21
00:02:21.270 --> 00:02:25.890
not part of the dimensions of the HTML elements which is called the outline

22
00:02:25.890 --> 00:02:31.560
which is just outside the order it sets some decoration to the border just

23
00:02:31.560 --> 00:02:36.090
outside and we can't see it it comes just before the margin but it does not

24
00:02:36.090 --> 00:02:41.880
affect the dimensions of the HTML elements okay so in the next video we're

25
00:02:41.880 --> 00:02:46.400
gonna start with the syntax of padding