1 00:00:00,570 --> 00:00:01,900 Hello and welcome. 2 00:00:01,920 --> 00:00:10,450 In this video I will be explaining how the csx margin property works. 3 00:00:10,530 --> 00:00:20,190 The Seer says marjane properties are used to create space around elements. 4 00:00:20,480 --> 00:00:27,870 Each margene has four sides and you can use this here says my own property. 5 00:00:27,880 --> 00:00:35,220 To set the margin area of all four sides of an element. 6 00:00:35,550 --> 00:00:37,950 Now for size. 7 00:00:38,090 --> 00:00:49,190 My modern properties are margin top margin right margin bottom and then the margin left when your year's 8 00:00:49,190 --> 00:00:49,940 margin is. 9 00:00:49,940 --> 00:00:55,410 You can specify the values for the margins. 10 00:00:55,410 --> 00:01:05,250 Margins can be specified using 1 2 3 or 4 values. 11 00:01:05,730 --> 00:01:14,870 Values can be applied to the margins based on the number of values specified. 12 00:01:14,880 --> 00:01:21,660 So let's take a look at how the values are applied based on the specified values. 13 00:01:21,660 --> 00:01:23,500 So this is a table. 14 00:01:23,670 --> 00:01:33,440 See if you have just one value specified that value is applied to all or the full size of the margin. 15 00:01:33,750 --> 00:01:40,360 If you have two values specified the first margin applies to the top and the bottom. 16 00:01:40,530 --> 00:01:48,720 The second up lies to the left and the right when there are three values specified the first margin 17 00:01:48,840 --> 00:01:51,450 applies to the top. 18 00:01:51,450 --> 00:01:58,900 The second goes to the left and the right and the third goes to the bottom. 19 00:01:58,920 --> 00:02:08,910 When you have four values specified the margins apply to the top the right the bottom and the left. 20 00:02:09,120 --> 00:02:10,980 In that order. 21 00:02:10,980 --> 00:02:14,030 So it's in a clock wise order. 22 00:02:14,070 --> 00:02:19,500 The way I tend to room remember this is my using the word trouble. 23 00:02:19,500 --> 00:02:22,800 So if you type in the word trouble take out the vowels. 24 00:02:22,870 --> 00:02:26,430 You would be blessed with t r b l. 25 00:02:26,730 --> 00:02:29,280 So when you how for value specified. 26 00:02:29,280 --> 00:02:32,700 You need to apply it in that order. 27 00:02:32,700 --> 00:02:47,150 Top right bottom left hand margin propertys have several values so the margin property can have lenth 28 00:02:47,730 --> 00:02:48,270 value. 29 00:02:48,450 --> 00:02:54,240 Percentage inherit and also the key word or two. 30 00:02:54,450 --> 00:03:05,790 The lenth basically specifies in margin in pixel bind centimetre value and so on depending on whatever 31 00:03:05,790 --> 00:03:15,360 unit of major ment you are using by basically specifies margin in whatever measurement you are using 32 00:03:16,020 --> 00:03:21,850 which basically refers to the size of the margin as if fixed value. 33 00:03:22,470 --> 00:03:25,090 Then we have the percentage. 34 00:03:25,110 --> 00:03:34,920 This is the size of the margin as a percentage relative to do with the containing block or parent element. 35 00:03:35,070 --> 00:03:44,390 So the percentage specifies in margin percentage half the width of the containing element. 36 00:03:44,490 --> 00:03:55,370 Then we have to inherit which specifies that the margin should be inherited from the parent element. 37 00:03:55,380 --> 00:03:58,720 We also have the key Ward 0 2. 38 00:03:59,130 --> 00:04:04,690 Basically this is when the browser calculates the margin. 39 00:04:04,980 --> 00:04:12,510 The browser will select a suitable margin to use certain cases. 40 00:04:12,630 --> 00:04:27,010 The browser code sets value that will centre an element of value can be positive is zero G negative. 41 00:04:27,330 --> 00:04:32,480 So now that we've have learnt a little bit about the here says my property. 42 00:04:32,670 --> 00:04:38,260 Let's try to set margin for some hate him out element so far. 43 00:04:38,260 --> 00:04:46,770 Look my His email here I am going to set a margin for my body element here so I'm going to my Seer says 44 00:04:47,420 --> 00:04:56,240 and I just come here and type Him body to my curly braces and I separate it. 45 00:04:56,430 --> 00:04:59,670 I'm going to make give the margin. 46 00:05:01,930 --> 00:05:05,260 Property I am going to make it. 47 00:05:05,260 --> 00:05:06,760 Give it to valiance. 48 00:05:06,760 --> 00:05:08,850 First of all it's going to be zero. 49 00:05:09,460 --> 00:05:17,410 And the second one is going to be Hall took them is I'm live in the second valley for the browser to 50 00:05:17,410 --> 00:05:17,800 set. 51 00:05:17,800 --> 00:05:20,570 We've already gone through how to apply the values. 52 00:05:20,860 --> 00:05:32,540 So if I fight to save on here and just refresh my browser he can see the body has been retired. 53 00:05:32,590 --> 00:05:35,090 So the margin for value is zero. 54 00:05:35,230 --> 00:05:42,760 And that addresses or to them is the browser will reset it so you can set the margin property for as 55 00:05:42,760 --> 00:05:45,580 many CML element as possible. 56 00:05:45,580 --> 00:05:51,970 For example I could set a margin for this image if I also want to do that. 57 00:05:52,060 --> 00:05:59,840 Next let's quickly go through this here says padian property is really similar to the Seer says margin 58 00:05:59,860 --> 00:06:00,370 property. 59 00:06:00,370 --> 00:06:06,340 The only difference is that Seer says padding property does not allow negative value. 60 00:06:06,580 --> 00:06:08,950 Apart from that everything else is different. 61 00:06:08,950 --> 00:06:12,560 Also Dave don't use all tool key word. 62 00:06:12,820 --> 00:06:19,480 So let me just run through the properties of this here says padding which is really similar to that 63 00:06:19,600 --> 00:06:23,650 of the here says Matt margin property. 64 00:06:23,650 --> 00:06:30,890 So here for the padding the properties are used to generate space around the content of an element. 65 00:06:31,120 --> 00:06:38,800 So if you think of this space inside an element that is known as a pad in this space outside the element 66 00:06:38,830 --> 00:06:43,160 is known as the margin H. 67 00:06:43,210 --> 00:06:51,230 Pi then has four sides just like the margin so we have the pad into the top pad into the right padding 68 00:06:51,260 --> 00:06:54,280 to the bottom and padding to the left. 69 00:06:54,280 --> 00:07:03,550 Just like the margin prop. padding can also be specified using 1 to 3 or 4 values because they have 70 00:07:03,610 --> 00:07:05,220 4 sides. 71 00:07:05,410 --> 00:07:10,280 So the application is the same way as that for the margin. 72 00:07:10,290 --> 00:07:15,420 So if you got just one values specified it applies to all four sides. 73 00:07:15,490 --> 00:07:21,990 If got to be applied to the top the bottom and then the second applies to the left and a right. 74 00:07:22,000 --> 00:07:28,660 If you've got three values the first spending goes to the top second goes to the left and right the 75 00:07:28,660 --> 00:07:30,690 third goes to the bottom. 76 00:07:30,820 --> 00:07:40,330 If you will for values specify the padding is applied in the order of top right bottom and left which 77 00:07:40,330 --> 00:07:43,450 is a clockwise direction. 78 00:07:43,690 --> 00:07:53,210 The pad in propertys have the following values so if you got the length which specifies a padding hidden 79 00:07:53,290 --> 00:07:58,470 pixels point centimetres or whatever measurement you are using. 80 00:07:58,810 --> 00:08:07,420 And we also have the percentage which refers to a padding in percentage which is relative. 81 00:08:07,420 --> 00:08:16,360 To do with of the containing element we also have the inherit which specifies that the padden should 82 00:08:16,810 --> 00:08:22,240 be inherited from the parent element. 83 00:08:22,240 --> 00:08:29,830 The key distinction between the pad in property and the margin is that we the pad in negative values 84 00:08:29,950 --> 00:08:31,620 and not allow it. 85 00:08:31,650 --> 00:08:37,700 So I'm going to add some padding properties here to my thesis. 86 00:08:37,820 --> 00:08:40,920 When I had it in the body here is well to the body elements. 87 00:08:40,930 --> 00:08:49,510 I'm just going to tap down and type in padding has a property okay. 88 00:08:49,750 --> 00:08:57,190 I'm going to give it a fair value so when I'm giving it the full value it would be applied in the order 89 00:08:57,460 --> 00:08:59,870 of top right. 90 00:09:00,000 --> 00:09:02,520 But Tom left the key. 91 00:09:02,540 --> 00:09:07,620 The way I tend to remember this is by the word trouble. 92 00:09:07,630 --> 00:09:12,130 Both you take and the vowels from the word trouble who are left. 93 00:09:12,400 --> 00:09:17,400 T r b l s. 94 00:09:17,410 --> 00:09:20,600 How I remember it so I'm going to give this four values. 95 00:09:20,650 --> 00:09:23,330 First of all be zero. 96 00:09:23,380 --> 00:09:31,600 The unit of measurement is going to be pixels so combat is going to be 20 pixels would be 20 pixels 97 00:09:31,600 --> 00:09:33,630 as well. 98 00:09:33,980 --> 00:09:43,360 For a value between the pixels he can see that the fire expand this page he can see that he values the 99 00:09:43,420 --> 00:09:47,800 padding is already taken apart and so has been apply. 100 00:09:47,800 --> 00:09:54,670 You may not see that this that distinctly adeleke distinctively but it is applied you can see the space 101 00:09:55,040 --> 00:09:59,990 padian refers to this space inside the content of. 102 00:10:00,440 --> 00:10:01,210 Element. 103 00:10:01,230 --> 00:10:09,680 All right so we've used for values here to apply padding to the body element to the bodies. 104 00:10:09,690 --> 00:10:17,630 Basically the content that is visible so that's a theme for this video in this video. 105 00:10:17,630 --> 00:10:25,170 I explained how the see says margin and padding property works. 106 00:10:25,170 --> 00:10:27,870 They work in identical fashion. 107 00:10:27,870 --> 00:10:35,330 The only key distinction is that the padding property does not allow negative values. 108 00:10:35,640 --> 00:10:44,280 And also it does not use the two key words so there's added two distinct differences between the padding 109 00:10:44,340 --> 00:10:46,260 and the margin property. 110 00:10:46,260 --> 00:10:48,470 Thanks for watching and bye for now.