1 00:00:00,210 --> 00:00:02,510 Hello everyone and welcome back. 2 00:00:02,520 --> 00:00:06,020 In today's video we will learn more about margin and panic. 3 00:00:06,370 --> 00:00:12,240 So you have this paragraph and you want to add some space between the water and the content in this 4 00:00:12,240 --> 00:00:14,660 scenario that you will use bagging. 5 00:00:14,790 --> 00:00:16,240 Let's try an example. 6 00:00:16,760 --> 00:00:18,210 So let's bring up our quote editor. 7 00:00:19,260 --> 00:00:22,200 So we already got an idea for a second paragraph. 8 00:00:22,230 --> 00:00:24,780 So coming back to our seats is fired. 9 00:00:25,590 --> 00:00:28,610 So what we need is bottom. 10 00:00:29,700 --> 00:00:34,700 So let's adopt so batting save 16 pixels. 11 00:00:34,720 --> 00:00:35,380 Let's save it. 12 00:00:36,180 --> 00:00:40,670 And now as you can see you've got some space between our content on the bottom. 13 00:00:40,990 --> 00:00:44,150 Now say you want to have different buildings on different sides. 14 00:00:44,230 --> 00:00:52,230 So for that we've got more binding properties routing top C on the top we need sixteen pixels. 15 00:00:52,320 --> 00:00:52,710 Right. 16 00:00:52,730 --> 00:00:54,400 Say 20 pixels 17 00:00:57,170 --> 00:01:05,260 batting left say 24 pixels but top say 28 pixels. 18 00:01:05,360 --> 00:01:10,980 Let's say that and as you can see they've got different buildings on different sides. 19 00:01:11,000 --> 00:01:17,550 Also if you notice these four properties are overriding our activist properties so if we make this as 20 00:01:17,550 --> 00:01:19,660 a hundred pixels. 21 00:01:19,840 --> 00:01:24,560 So as you can see all the different sides have still the same padding. 22 00:01:24,910 --> 00:01:29,110 Other than the batting bottom because we haven't given a value for batting bottom here. 23 00:01:29,130 --> 00:01:32,650 So if we change this to batting water and we save it. 24 00:01:33,420 --> 00:01:39,040 So none of the sides have a hundred pixels spotting this hundred bits of batting was ordered in by all 25 00:01:39,040 --> 00:01:48,380 these other food values or let scum in these final so we've got another way of writing these links 20 26 00:01:48,390 --> 00:01:49,470 from different sides. 27 00:01:49,480 --> 00:01:51,640 So this is like a shorthand version. 28 00:01:52,090 --> 00:02:00,000 So batting say on batting doctor got 16 pixels than on the right we've got 20 pixels in bottom say 24 29 00:02:00,010 --> 00:02:02,880 pixels on the left see 28 pixels. 30 00:02:02,890 --> 00:02:03,450 Let's say that. 31 00:02:04,320 --> 00:02:08,460 And as you can see we still about different bindings on different sides. 32 00:02:08,490 --> 00:02:14,130 So again we've been working with these shorthand rotations sequence is very important. 33 00:02:14,710 --> 00:02:17,090 So the first value is for batting top. 34 00:02:17,320 --> 00:02:24,010 The second values of batting right the total values for batting bottom and then the last value is for 35 00:02:24,010 --> 00:02:25,810 the batting left. 36 00:02:25,810 --> 00:02:33,090 So it goes clockwise top right bottom and left now so you have batting something like this. 37 00:02:33,090 --> 00:02:40,440 So batting for batting top you had see 24 pixels but in right you had 48 pixels for bottom bottom you 38 00:02:40,440 --> 00:02:48,330 have 24 pixels and so batting left you had four the eight pixels that same and as you can see you've 39 00:02:48,330 --> 00:02:51,130 got the same batting on top and bottom and left and right. 40 00:02:51,720 --> 00:02:59,330 So in this case what we can do is we can remove these last two values so even this value presents batting 41 00:02:59,420 --> 00:03:06,290 top right bottom and left just that we've got two values you so minimally just give two values so the 42 00:03:06,290 --> 00:03:08,620 first value is used for top and bottom. 43 00:03:08,900 --> 00:03:13,230 Second value is not used for left and right all right guys. 44 00:03:14,010 --> 00:03:16,310 OK so moving on to the margin boy. 45 00:03:16,970 --> 00:03:19,300 So you want to add space outside the border. 46 00:03:20,060 --> 00:03:22,550 So here we would use margin. 47 00:03:22,730 --> 00:03:23,890 So let's try that. 48 00:03:23,940 --> 00:03:29,070 Say margin for the exits. 49 00:03:29,250 --> 00:03:31,820 Let's say that. 50 00:03:31,930 --> 00:03:35,710 And as you can see we've got space outside the border. 51 00:03:35,710 --> 00:03:40,510 So we've got some white space on the left top on right again just like padding. 52 00:03:40,540 --> 00:03:43,890 You can define margin different values on different sides. 53 00:03:44,010 --> 00:03:51,650 So margin top say forty eight pixels margin right. 54 00:03:51,650 --> 00:04:00,840 Say 24 pixels margin bottom say 32 pixels and margin left say 60 pixels. 55 00:04:01,440 --> 00:04:06,440 Let David and as you can see we've got different values on different sides. 56 00:04:06,560 --> 00:04:13,520 So the spotting is a bit more than the right hand side and so on so even for this we have a shorthand 57 00:04:13,550 --> 00:04:16,900 rotation so we could simply use margin. 58 00:04:17,340 --> 00:04:20,530 So for dot we had 48 pixels. 59 00:04:20,520 --> 00:04:22,610 Again space followed by margin right. 60 00:04:22,620 --> 00:04:29,640 Which was 24 pixels followed by margin bottom which was 32 pixels followed by margin left which was 61 00:04:29,640 --> 00:04:32,980 60 pixels let's save it. 62 00:04:33,370 --> 00:04:36,680 As you can see on margin is still the same. 63 00:04:36,710 --> 00:04:42,210 All right so again same margin same we've got on top 48 pixels right. 64 00:04:42,230 --> 00:04:43,780 Sixty pixels. 65 00:04:43,860 --> 00:04:45,850 Bottom 48 pixels on the left. 66 00:04:45,890 --> 00:04:52,370 Sixty pixels so again you've got the same bottom on top bottom left and right. 67 00:04:52,390 --> 00:05:00,220 So what we can do is we can remove these last two values so 48 would represent the value for top and 68 00:05:00,220 --> 00:05:06,940 bottom and 60 multiples in the value for left and right that's also the day guys. 69 00:05:06,950 --> 00:05:12,070 If there's something that you did not understand feel free to drop a comment and we will discuss it. 70 00:05:12,280 --> 00:05:14,360 See you in the next video by Andy. 71 00:05:14,400 --> 00:05:14,690 Gary.