1 00:00:02,260 --> 00:00:06,360 Let's focus on to our section here and let's get started 2 00:00:06,360 --> 00:00:07,970 with the, 3 00:00:07,970 --> 00:00:10,090 issue. I just mentioned, 4 00:00:10,090 --> 00:00:14,040 you saw that I selected the highlight section here 5 00:00:14,040 --> 00:00:16,650 and there you can see that we have content, right? 6 00:00:16,650 --> 00:00:19,800 And then we have this white space, this blank area. 7 00:00:19,800 --> 00:00:22,190 So this part here below the image, 8 00:00:22,190 --> 00:00:23,470 make sure to check it out. 9 00:00:23,470 --> 00:00:25,640 Can you see it? this white area 10 00:00:26,520 --> 00:00:27,450 you might say, well, 11 00:00:27,450 --> 00:00:30,260 this is some kind of margin from previous section 12 00:00:30,260 --> 00:00:31,330 or anything like this. 13 00:00:31,330 --> 00:00:32,980 Let's check this. 14 00:00:32,980 --> 00:00:35,990 Well, turns out it's not can see this year. 15 00:00:35,990 --> 00:00:39,030 The content of the first section ends, 16 00:00:39,030 --> 00:00:41,100 with the end of the background image. 17 00:00:41,100 --> 00:00:44,250 And then we have, all this white space, 18 00:00:44,250 --> 00:00:45,923 what is this white space now? 19 00:00:45,923 --> 00:00:48,420 what you saw it in a previous lecture, 20 00:00:48,420 --> 00:00:49,713 the white space, 21 00:00:50,950 --> 00:00:54,710 Is the margin of the H-two element. 22 00:00:54,710 --> 00:00:58,750 Now the H two-element is actually the child of the section 23 00:00:58,750 --> 00:01:00,760 and what is going on right here. 24 00:01:00,760 --> 00:01:01,660 But generally, 25 00:01:01,660 --> 00:01:03,430 this is not a new concept. 26 00:01:03,430 --> 00:01:07,260 This again is a margin collapsing-related problem. 27 00:01:07,260 --> 00:01:08,580 So to say, 28 00:01:08,580 --> 00:01:10,200 what's new at this stage here, though, 29 00:01:10,200 --> 00:01:12,100 is that margin collapsing 30 00:01:12,100 --> 00:01:16,190 doesn't only occur between adjacent elements as we saw it. 31 00:01:16,190 --> 00:01:20,100 It also occurs in a parent-child relationship. 32 00:01:20,100 --> 00:01:22,560 As we can see right here, 33 00:01:22,560 --> 00:01:24,360 why is it occurring here? 34 00:01:24,360 --> 00:01:26,560 Well, because we have the parent, 35 00:01:26,560 --> 00:01:29,680 which has no margin or padding applied, 36 00:01:29,680 --> 00:01:32,880 and we have then inside this parent, a child 37 00:01:32,880 --> 00:01:34,480 where we have a margin, 38 00:01:34,480 --> 00:01:36,800 this kind of collapses the margin 39 00:01:36,800 --> 00:01:40,090 and adds this margin that we actually have in the child 40 00:01:40,090 --> 00:01:41,710 to the parent. 41 00:01:41,710 --> 00:01:45,430 You can see the same behavior at the bottom of this element, 42 00:01:45,430 --> 00:01:46,980 by the way, 43 00:01:46,980 --> 00:01:49,840 we have a wide space at the bottom 44 00:01:49,840 --> 00:01:52,190 and this white space is caused by what? 45 00:01:52,190 --> 00:01:53,023 Well, 46 00:01:53,023 --> 00:01:54,420 by the margin that we added 47 00:01:54,420 --> 00:01:57,100 to our unordered list right here. 48 00:01:57,100 --> 00:01:58,200 So that's the same problem. 49 00:01:58,200 --> 00:01:59,640 We have a margin at the bottom, 50 00:01:59,640 --> 00:02:02,910 but no margin or padding for the parent. 51 00:02:02,910 --> 00:02:05,440 Therefore, this is the result. 52 00:02:05,440 --> 00:02:07,200 How can we fix this now? 53 00:02:07,200 --> 00:02:08,530 Well, we can, for example, 54 00:02:08,530 --> 00:02:11,420 simply add some padding to the parent, 55 00:02:11,420 --> 00:02:12,350 with that, 56 00:02:12,350 --> 00:02:16,250 this margin collapsing issue will be solved. Immediately. 57 00:02:16,250 --> 00:02:17,140 Let's do this, 58 00:02:17,140 --> 00:02:20,063 but going back to the code and by creating a new selector 59 00:02:20,063 --> 00:02:22,653 here, the highlights ID. 60 00:02:23,550 --> 00:02:25,110 So, add a section element, 61 00:02:25,110 --> 00:02:30,110 and there, I just add a padding of all around 24 pixels. 62 00:02:30,400 --> 00:02:31,400 If I do that, 63 00:02:31,400 --> 00:02:34,860 you see that the space between the elements changes a bit. 64 00:02:34,860 --> 00:02:36,390 And of course the padding, all of that, 65 00:02:36,390 --> 00:02:39,710 has an impact on to the space we have for our container. 66 00:02:39,710 --> 00:02:40,890 But now, 67 00:02:40,890 --> 00:02:43,270 our first section ends here. 68 00:02:43,270 --> 00:02:46,710 The second one starts directly afterwards with the padding 69 00:02:46,710 --> 00:02:48,300 and inside the elements. 70 00:02:48,300 --> 00:02:50,993 We now have the margin of the H two-element, 71 00:02:52,020 --> 00:02:56,680 and also the margin of the unordered list 72 00:02:56,680 --> 00:02:59,490 is now inside our section, 73 00:02:59,490 --> 00:03:02,420 I can prove this to you. If we scroll down a bit 74 00:03:02,420 --> 00:03:03,570 like this, 75 00:03:03,570 --> 00:03:07,520 you'll see everything is part of the content now. 76 00:03:07,520 --> 00:03:09,700 So this was one thing on a new thing, 77 00:03:09,700 --> 00:03:10,960 I would like to show you here. 78 00:03:10,960 --> 00:03:14,550 So a little bit of a more advanced margin collapsing issue, 79 00:03:14,550 --> 00:03:16,480 which you can solve like this, 80 00:03:16,480 --> 00:03:17,530 besides that, 81 00:03:17,530 --> 00:03:20,550 I'm actually quite happy with the look. 82 00:03:20,550 --> 00:03:21,960 What is missing here though, 83 00:03:21,960 --> 00:03:25,650 is a background color of that section here 84 00:03:25,650 --> 00:03:29,530 let's work on this final adjustment after section 85 00:03:29,530 --> 00:03:30,623 in the next lecture.