WEBVTT FILE





1
00:00:06.049 --> 00:00:11.040
in this video we're gonna learn the syntax of padding first of all let's

2
00:00:11.040 --> 00:00:16.139
make a few changes to the HTML documents we working with let's get rid of the

3
00:00:16.139 --> 00:00:24.449
span elements now keep only dips and paragraphs for now also let's change the

4
00:00:24.449 --> 00:00:28.800
height of all the dips to auto so that we can see the impacts of padding

5
00:00:28.800 --> 00:00:36.780
clearly okay okay now let's define some padding to the Facebook div so the

6
00:00:36.780 --> 00:00:40.770
syntax is padding there are several ways of defining the padding the first one is

7
00:00:40.770 --> 00:00:45.239
by using one value so if we set that value to 16 pixels for instance it's

8
00:00:45.239 --> 00:00:50.910
going to define the padding from all the dip sites and if we go to inspect

9
00:00:50.910 --> 00:00:55.379
elements we will see clearly what's going on so if we select the Facebook

10
00:00:55.379 --> 00:01:00.660
tip we can see that the content is here and the padding is set to 16 from all

11
00:01:00.660 --> 00:01:08.010
sides but you will notice the ste there is some space between the text and the

12
00:01:08.010 --> 00:01:13.140
paragraph a top and bottom borders and if you remember what we have said in the

13
00:01:13.140 --> 00:01:17.540
previous video we say that's paragraphs they have some default margins and

14
00:01:17.540 --> 00:01:22.920
that's why we see that space so let's get rid of that space for now and see

15
00:01:22.920 --> 00:01:31.790
what's gonna happen so let's go back to the live preview and let's define a

16
00:01:31.790 --> 00:01:37.740
margin to paragraphs of zero so we're gonna jump a little bit further here

17
00:01:37.740 --> 00:01:41.220
because we haven't seen the syntax of margins but we're gonna come back to

18
00:01:41.220 --> 00:01:47.340
margins later okay let's say that's two zero and now you can see if you go to

19
00:01:47.340 --> 00:01:55.140
inspect elements that's the space between the Facebook text and the border

20
00:01:55.140 --> 00:02:01.950
of the paragraph has disappeared okay all right let's go back to the brackets

21
00:02:01.950 --> 00:02:07.920
file go back to live preview and set some padding now to the next date which

22
00:02:07.920 --> 00:02:15.519
is the Apple if so syntax is padding now we're gonna use four values so we

23
00:02:15.519 --> 00:02:20.950
can i define a parting for each of the four sides of the tip basically it's

24
00:02:20.950 --> 00:02:26.019
gonna start with the top side moving to the right one then the bottom one and

25
00:02:26.019 --> 00:02:30.720
then the left one okay so the first one for the top followed by right followed

26
00:02:36.040 --> 00:02:44.530
by the bottom part and then followed by the left one okay and also there is

27
00:02:44.530 --> 00:02:49.569
another way it's by using only two values which are going to define the

28
00:02:49.569 --> 00:02:54.879
padding for the top and bottom sides and then the second one is gonna define the

29
00:02:54.879 --> 00:02:59.500
padding for the right and left sides okay so for instance let's set that to

30
00:02:59.500 --> 00:03:06.069
10 40 pixels and 10 pixels okay if we go to inspect elements and just see what's

31
00:03:06.069 --> 00:03:12.930
going on if we go to the Microsoft Save we can see padding at the top and bottom

32
00:03:12.930 --> 00:03:21.160
40 and from the left and right sides it's set to 10 pixels also regarding the

33
00:03:21.160 --> 00:03:26.560
dimensions of the div up so we add padding the Davy's can have new

34
00:03:26.560 --> 00:03:30.730
dimensions so the new dimensions are going to be the original dimensions of

35
00:03:30.730 --> 00:03:37.000
the div which we can see here are the dimensions of the content and plus the

36
00:03:37.000 --> 00:03:43.599
padding okay so the height for instance is gonna be for Microsoft's div is gonna

37
00:03:43.599 --> 00:03:50.200
be 40 pixels plus 40 pixels plus the height of the content and also for the

38
00:03:50.200 --> 00:03:53.980
width is going to be 10 pixels plus 312 pixels

39
00:03:53.980 --> 00:04:01.480
plus ten pixels of the padding all right so this is it's for padding in the next

40
00:04:01.480 --> 00:04:05.669
video are we gonna cover the borders