1 00:00:05,620 --> 00:00:11,440 The next property is the property dealing with margins. 2 00:00:12,730 --> 00:00:20,620 The margins are a fundamental aspect in the Web pages development with the help of success. 3 00:00:22,610 --> 00:00:32,000 As you have seen, I have just moved our controller of the preview created from the central position 4 00:00:32,840 --> 00:00:42,080 that it had before to this side to ease this switch between age Tamalpais and stylesheet. 5 00:00:43,480 --> 00:00:52,150 As you know, we have inserted some borders, insider sections, starting, however, from the age to 6 00:00:52,150 --> 00:01:01,600 selecter, that he's from the headings again inside age to we can see how the margins work. 7 00:01:03,900 --> 00:01:12,630 By inserting the margin as shampoo to in this case as well, you see countless possible options, although 8 00:01:12,630 --> 00:01:22,770 we are focusing on the main ones in certain margin and for example, choosing 50 pixels as a reference. 9 00:01:23,710 --> 00:01:32,530 Saving and refreshing the difference with what was before is striking, as you can see, both at the 10 00:01:32,530 --> 00:01:40,810 top and at the bottom and also on the left and also on the right. 11 00:01:41,470 --> 00:01:46,450 The margins display a width of 50 pixels. 12 00:01:46,930 --> 00:01:55,240 In this case, if we wanted to define margins, able to help us improve the page according to the user 13 00:01:55,240 --> 00:01:56,080 experience. 14 00:01:57,570 --> 00:02:03,090 We might define specific margins starting from margin top. 15 00:02:06,520 --> 00:02:07,660 Margin bottom. 16 00:02:10,530 --> 00:02:12,830 Margine, lefter. 17 00:02:14,150 --> 00:02:25,460 And Margine, right, of course, we can choose to define some specific measures for any of the four 18 00:02:25,460 --> 00:02:31,070 positions, we can, for example, choose 10 pizzle from the top. 19 00:02:32,350 --> 00:02:36,490 Twenty pixels below every headings. 20 00:02:37,960 --> 00:02:45,910 15 pizzas from the left and 15 pizzas from the right before refreshing. 21 00:02:45,940 --> 00:02:50,370 Let's take a look at the current situation of our preview. 22 00:02:51,220 --> 00:02:59,560 Let's shrink it and let's save and refresh deleting, obviously, the 50 pics and Margene. 23 00:03:01,020 --> 00:03:04,890 Let's say refresh and let's go back to our page. 24 00:03:05,800 --> 00:03:14,050 As you can see now, our margin has worked upon every single day since uncertainty, in fact, between 25 00:03:14,050 --> 00:03:19,420 the top and the bottom to the distance is only 10 pixels. 26 00:03:19,720 --> 00:03:21,660 On the left is a bit more. 27 00:03:21,700 --> 00:03:23,740 And in fact, it is 15. 28 00:03:23,980 --> 00:03:28,140 And so inches on the right at the bottom is 20. 29 00:03:28,150 --> 00:03:31,810 And in fact, it's the double of one inserted at the top. 30 00:03:32,290 --> 00:03:39,370 All of these functions, which will help us specifically when dealing with the responsive design, as 31 00:03:39,370 --> 00:03:47,170 in that moment, we will have to do more with margins and also with the topic of the next lesson can 32 00:03:47,170 --> 00:03:57,580 also be inserted within a unique function, therefore in a linear way, in certain only margine defining 33 00:03:57,580 --> 00:03:59,460 then every single dimension. 34 00:04:00,040 --> 00:04:09,040 In this case, the insert in order is supposed to be first the top value, therefore ten pixels, then 35 00:04:09,040 --> 00:04:12,100 the right value, therefore 15 pixels. 36 00:04:13,140 --> 00:04:20,520 The bottom value, therefore, 20 pixels and the left value, therefore 15 pixels. 37 00:04:22,240 --> 00:04:27,200 By closing and saving, we obtain the same result. 38 00:04:27,220 --> 00:04:31,270 And so let's see the way it appears now, let's refresh. 39 00:04:31,270 --> 00:04:38,380 And we see the result does not change to verify the actual functioning network, for example, top to 40 00:04:38,390 --> 00:04:48,100 bottom, let's say refresh and see that now the top part and the bottom part have swapped dimensions. 41 00:04:50,160 --> 00:04:58,320 Additional functions, the margins may before will be covered, as usual, so far in the advanced part 42 00:04:58,320 --> 00:05:00,510 of the CSX version three.