1
00:00:00,840 --> 00:00:06,090
So one of the most important concepts that we have yet to cover and assess is positioning of elements

2
00:00:06,090 --> 00:00:06,440
.

3
00:00:06,600 --> 00:00:10,290
So how do we lay out a page or move a div to the top right.

4
00:00:10,410 --> 00:00:15,720
Or how do we make an anchor tag wider or add spacing between images.

5
00:00:15,780 --> 00:00:20,110
All of that is really important and it's all related to something called the box model.

6
00:00:20,220 --> 00:00:26,820
So the box model is this basic idea that's really central to everything in HD you assess which is that

7
00:00:26,820 --> 00:00:31,190
basically every element has a rectangular box around it.

8
00:00:31,680 --> 00:00:38,040
So we can see here just going to go to any web page on MDA and I have the inspector open and I have

9
00:00:38,040 --> 00:00:39,620
the magnifying glass selected.

10
00:00:40,010 --> 00:00:44,810
And as I hover over every element you can see that there's a box around it.

11
00:00:44,910 --> 00:00:48,180
So this H2 has a blue box around it.

12
00:00:48,180 --> 00:00:49,810
This one has a box.

13
00:00:50,130 --> 00:00:53,370
Even things that aren't particularly boxy.

14
00:00:53,490 --> 00:00:56,320
So this rounded corner div..

15
00:00:56,490 --> 00:00:58,080
It still has a box around it.

16
00:00:58,080 --> 00:00:59,310
Behind the scenes.

17
00:00:59,520 --> 00:01:05,790
So does this here and this one is really not round or not boxy looking to have these rounded corners

18
00:01:05,820 --> 00:01:09,130
but it's still a box.

19
00:01:09,240 --> 00:01:14,940
So these boxes are really useful behind the scenes because we can style different properties on them

20
00:01:14,940 --> 00:01:15,870
.

21
00:01:15,870 --> 00:01:19,350
So there are four properties or four different parts of every box.

22
00:01:19,350 --> 00:01:23,550
There's a lot more properties but for parts of the box that we can manipulate.

23
00:01:23,610 --> 00:01:29,790
So let's suppose that this diagram which is also from MDA and is of a paragraph.

24
00:01:29,790 --> 00:01:35,010
So I have some text in a paragraph and I give it a orange or a yellow border and this is what the user

25
00:01:35,010 --> 00:01:42,210
sees some text and a border but behind the scenes there's actually some other things happening.

26
00:01:42,360 --> 00:01:47,920
So between the border and the text there's something called padding.

27
00:01:48,000 --> 00:01:51,040
So padding is just the space on the inside of the border.

28
00:01:51,190 --> 00:01:56,730
So between the content and the border is padding and then there's also margin which is on the other

29
00:01:56,730 --> 00:02:01,060
side it's between the border on the outside and anything else.

30
00:02:01,170 --> 00:02:04,720
So we use margin often to add spacing between elements.

31
00:02:04,860 --> 00:02:10,470
So if we had two paragraphs and I wanted them to be further apart then I would use margin and increase

32
00:02:10,470 --> 00:02:11,340
that.

33
00:02:11,880 --> 00:02:16,380
So now we're going to do a little bit of a deep dive into actually the syntax of some of the properties

34
00:02:16,380 --> 00:02:18,700
that we want to use before we do that.

35
00:02:18,720 --> 00:02:24,000
I want to just show you two things you can look forward to making the first one of the most exciting

36
00:02:24,330 --> 00:02:29,870
but what is important is that we now have a way of making something that looks like this.

37
00:02:29,880 --> 00:02:34,500
Up until now we don't actually have a way of making these boxes that are connected to one another that

38
00:02:34,500 --> 00:02:39,330
have a with assigned to them but they're empty there's no text inside.

39
00:02:39,330 --> 00:02:46,260
So we're going to learn about the box model and apply that here to make this tic tac toe board and then

40
00:02:46,260 --> 00:02:50,830
we're going to make this portfolio site for a fictional photographer.

41
00:02:51,450 --> 00:02:52,350
So this is nice.

42
00:02:52,420 --> 00:03:00,690
It's images it's responsive so it changes size a change the window size and the grid.

43
00:03:00,750 --> 00:03:04,270
All of this is based off of the concepts you're going to learn here.

44
00:03:04,710 --> 00:03:07,020
So I'm going to go ahead and open up sublime here.

45
00:03:07,560 --> 00:03:10,510
And I have a really simple document that I've created.

46
00:03:10,740 --> 00:03:12,600
So it's just simple HTML.

47
00:03:12,660 --> 00:03:14,670
It has a style sheet connected.

48
00:03:14,700 --> 00:03:15,330
It's empty.

49
00:03:15,330 --> 00:03:18,930
Aside from a few comments and then two paragraphs.

50
00:03:18,930 --> 00:03:25,620
So if I open this up you can see that it's very basic very boring and we're just going to use this to

51
00:03:25,620 --> 00:03:27,660
play around with the box model.

52
00:03:28,860 --> 00:03:35,910
So I'm going to go to my success and I'm going to select paragraphs and then I'm just going to copy

53
00:03:35,910 --> 00:03:41,940
these comments inside so that I can write some code beneath them just to visually tell you what I'm

54
00:03:41,940 --> 00:03:43,370
doing.

55
00:03:43,380 --> 00:03:45,740
So let's start by giving these a border.

56
00:03:45,900 --> 00:03:54,450
So this should be review border and let's do to pixel solid blue save that refresh and you can see that

57
00:03:54,450 --> 00:03:57,630
we get a border all the way around the content.

58
00:03:57,630 --> 00:04:02,360
And what you also notice is that the content here goes all the way across the screen.

59
00:04:02,370 --> 00:04:08,460
Our border doesn't stop right here and that's because when we make a paragraph by default it goes all

60
00:04:08,460 --> 00:04:09,620
the way across the screen.

61
00:04:09,630 --> 00:04:20,210
So if I want to change the width of the paragraph itself of the text I can use the width property and

62
00:04:20,220 --> 00:04:23,260
I'm going to go ahead and give a width of one.

63
00:04:23,490 --> 00:04:25,390
Let's do 200 pixels to start.

64
00:04:25,890 --> 00:04:29,190
And if I refresh you can see we've now changed the width.

65
00:04:29,190 --> 00:04:34,920
If I inspect the content isn't blue.

66
00:04:35,940 --> 00:04:37,840
And then we have a border around it.

67
00:04:38,310 --> 00:04:39,700
So the content is blue.

68
00:04:40,110 --> 00:04:45,350
And on this diagram that is this box right here this element box.

69
00:04:45,630 --> 00:04:48,330
And then we have a border that is directly around it.

70
00:04:48,330 --> 00:04:52,020
There's no space between the border and the content.

71
00:04:52,020 --> 00:04:56,920
One other thing with the width and also there's a height.

72
00:04:57,060 --> 00:05:02,360
So let's do a height of 300 pixels and see we've just added a bunch of space.

73
00:05:02,370 --> 00:05:06,620
I'm going to get rid of that but there's a height that we can use just like with.

74
00:05:06,930 --> 00:05:11,760
We don't have to just use pixels so we can use percentages.

75
00:05:13,890 --> 00:05:15,780
And those are really useful so let me show you.

76
00:05:15,810 --> 00:05:23,310
Let's do 50 percent and you might be wondering what is it 50 percent of.

77
00:05:23,310 --> 00:05:27,290
And the answer is that it's 50 percent of the parent element.

78
00:05:27,300 --> 00:05:34,230
So in this case it's the body that the paragraph is inside of the paragraph goes halfway across the

79
00:05:34,230 --> 00:05:35,240
body.

80
00:05:35,310 --> 00:05:37,390
In our case the body is the entire page.

81
00:05:37,410 --> 00:05:38,240
It was all the way across.

82
00:05:38,250 --> 00:05:40,620
So we end up with half the page.

83
00:05:40,800 --> 00:05:51,870
And what's nice about this if I change the window size it also changes so a lot of people use this and

84
00:05:51,900 --> 00:05:54,890
will use that actually to use in this image grid.

85
00:05:55,280 --> 00:05:59,490
You can see that the images change their width and that's a percentage.

86
00:06:00,040 --> 00:06:04,590
OK so I'm going to keep it like that for now.

87
00:06:04,770 --> 00:06:10,080
And then the next property we're going to talk about is padding and remember padding is this space between

88
00:06:10,080 --> 00:06:11,600
the element and the border.

89
00:06:11,750 --> 00:06:15,410
And right now we don't have any space the borders right on top.

90
00:06:15,840 --> 00:06:21,570
So there's a property called padding and we can give it a number of pixels and let's do 10 pixels to

91
00:06:21,570 --> 00:06:22,120
start.

92
00:06:22,230 --> 00:06:25,130
Save the file refresh.

93
00:06:25,410 --> 00:06:28,700
And now we have 10 pixels of padding on all sides.

94
00:06:29,040 --> 00:06:36,660
So if I inspect now you'll see there's now this green content that's introduced so we have the blue

95
00:06:37,080 --> 00:06:45,390
content itself and then we have the green around it which is between the border and the content so we

96
00:06:45,380 --> 00:06:49,760
can obviously increment this and we get a lot more space on the inside.

97
00:06:50,490 --> 00:06:52,890
But this is not the only way to set padding.

98
00:06:52,920 --> 00:06:57,250
This sets it on all four sides as exactly the same.

99
00:06:57,380 --> 00:07:01,760
But sometimes we only want padding on one side or two sides just like with border.

100
00:07:01,800 --> 00:07:09,510
There are short cuts for the longer version where it's a border top 10 pixels border bottom five pixels

101
00:07:09,500 --> 00:07:09,830
.

102
00:07:09,900 --> 00:07:17,940
Same thing with padding and it comment that out and we can do something like padding left 40 pixels

103
00:07:19,440 --> 00:07:20,270
and fresh.

104
00:07:20,520 --> 00:07:22,090
And we get padding right here.

105
00:07:22,320 --> 00:07:24,250
And that's the only place for padding is.

106
00:07:24,330 --> 00:07:29,640
And I remember the space over here this blue is not the padding that's her actual content that's from

107
00:07:29,630 --> 00:07:30,830
this with here.

108
00:07:30,990 --> 00:07:33,610
So different even though it looks like there's space on the right.

109
00:07:33,620 --> 00:07:35,930
It's coming from a different place.

110
00:07:37,170 --> 00:07:40,920
So another thing that we can do here is play with the margin.

111
00:07:41,160 --> 00:07:43,780
So the margin is a last piece of the puzzle.

112
00:07:43,860 --> 00:07:45,900
It's the space on the outside of the border.

113
00:07:45,900 --> 00:07:47,980
So between elements.

114
00:07:48,450 --> 00:07:54,620
So this is going to be useful because we might want to increment or increase this space right here or

115
00:07:54,620 --> 00:08:01,280
as an example here this space right here in between the images is set using Marjan.

116
00:08:01,500 --> 00:08:07,090
So it actually looks just like padding so we can say margin and let's do something obvious like 100

117
00:08:07,110 --> 00:08:10,240
pixels to start and refresh.

118
00:08:10,410 --> 00:08:15,810
And what happened is we now have 100 pixels of space on all sides of the element on the outside of the

119
00:08:15,810 --> 00:08:17,100
border.

120
00:08:18,240 --> 00:08:19,360
So find aspect.

121
00:08:19,980 --> 00:08:26,910
You'll see that in Chrome that's identified as orange so blue is the content Green is the padding in

122
00:08:27,000 --> 00:08:28,710
Orange is the margin.

123
00:08:28,800 --> 00:08:30,030
So just like padding.

124
00:08:30,030 --> 00:08:36,050
Sometimes we only want to set one part of the margin one side so we can do something like margin top

125
00:08:36,690 --> 00:08:38,890
is 500 pixels.

126
00:08:38,900 --> 00:08:45,000
And then when they come at this one out for now and save and we only get space on the top on the left

127
00:08:45,000 --> 00:08:46,070
there's nothing.

128
00:08:46,160 --> 00:08:48,180
And then more space on the top of this one.

129
00:08:48,170 --> 00:08:50,480
Nothing on the bottom or the left or the right.

130
00:08:50,610 --> 00:08:52,710
So that's margin.

131
00:08:52,710 --> 00:08:58,500
So sometimes we to add values to all sides of the margin but we don't want to have to do it with four

132
00:08:58,500 --> 00:08:59,510
different lines.

133
00:08:59,660 --> 00:09:04,110
So we don't want them to be exactly the same if they are here but we don't all have to say margin top

134
00:09:04,200 --> 00:09:06,500
margin left margin right margin bottom.

135
00:09:06,570 --> 00:09:09,550
So there's another shortcut just like for border.

136
00:09:09,570 --> 00:09:14,780
Or we can do things at once we can do this margin and give it four values.

137
00:09:14,820 --> 00:09:21,300
So the first one is for the top and then the right and then the bottom.

138
00:09:21,750 --> 00:09:24,330
Let's do 500 pixels and then the left

139
00:09:27,570 --> 00:09:35,550
and by doing that we get this nice four sided margin where the values are all different but we only

140
00:09:35,550 --> 00:09:36,820
had to do in one line.

141
00:09:37,290 --> 00:09:44,190
So just to inspect this here and see if we get the 500 pixels on the bottom it the 20 on top we get

142
00:09:44,180 --> 00:09:49,920
the hundred on the left and then we have our 40 on the right.

143
00:09:50,010 --> 00:09:53,790
So there's one last thing that you'll see often with margin which is margin.

144
00:09:53,790 --> 00:09:54,480
Auto.

145
00:09:54,780 --> 00:09:59,340
So what we can do is set the margin to be auto on the left or the right.

146
00:09:59,370 --> 00:10:02,550
And what that will do is actually Center an element for us.

147
00:10:02,550 --> 00:10:04,570
So let me show you how that works.

148
00:10:04,710 --> 00:10:12,870
And the comment this out again and we can write margin and let's just say zero margin on top auto on

149
00:10:12,870 --> 00:10:18,390
the left or on the right zero margin and bottom and auto on the left.

150
00:10:18,510 --> 00:10:23,520
And if I make this full size and refresh you'll see that it centers things for us.

151
00:10:23,520 --> 00:10:30,740
So what that means it's decided that this is 50 percent because we said that here and then it figures

152
00:10:30,750 --> 00:10:36,810
out the left is auto and the right is auto so just does it as much as it needs to do and that will actually

153
00:10:36,810 --> 00:10:37,880
center it for us.

154
00:10:37,980 --> 00:10:41,540
And then we have zero on the top and the bottom so they're scrunched together.

155
00:10:41,930 --> 00:10:47,940
What we can also do there's an even shorter way of doing this and it looks like this margin zero Otto

156
00:10:47,980 --> 00:10:48,200
.

157
00:10:48,540 --> 00:10:53,470
And so this will set the top and bottom to zero the left and right to auto.

158
00:10:53,580 --> 00:11:01,380
So nothing changes and we can also use this syntax if I want to add 50 pixels to the top and auto or

159
00:11:01,380 --> 00:11:04,700
I want to add 50 pixels and 20 pixels.

160
00:11:04,740 --> 00:11:09,830
The one thing to remember is you need the x there unless the number is zero.

161
00:11:10,430 --> 00:11:17,720
So if I do this it adds 20 on the top on the left and the right and then it adds 50 on the top and bottom

162
00:11:17,730 --> 00:11:18,760
.

163
00:11:18,780 --> 00:11:21,070
So let's recap here just one more time.

164
00:11:21,120 --> 00:11:25,370
We've got the inner content which is right here.

165
00:11:25,830 --> 00:11:31,290
We've got padding which is between the borders so all we have is padding left and then we have margin

166
00:11:31,430 --> 00:11:33,440
which is between the border and on the other side.

167
00:11:33,450 --> 00:11:35,530
So between elements basically.

168
00:11:35,610 --> 00:11:40,150
So in the next few videos we are going to apply these concepts and use them throughout this course