1
00:00:01,290 --> 00:00:05,340
In this video we're going to take a closer look at the box object model and understand how we can use

2
00:00:05,340 --> 00:00:07,900
it to position a single element by itself.

3
00:00:08,850 --> 00:00:13,290
If you've ever worked with web development like I mentioned a lot of this box object model is going

4
00:00:13,290 --> 00:00:15,300
to be pretty darn familiar.

5
00:00:15,300 --> 00:00:20,800
So the box object model we take a look at one single piece of content or one single element.

6
00:00:20,880 --> 00:00:26,540
This might be like a piece of text or a view or maybe an image or just about anything else.

7
00:00:26,970 --> 00:00:32,400
The box object model refers to some positioning or some spacing that we place around that single piece

8
00:00:32,400 --> 00:00:38,830
of content with the box object model we have three layers running out from that piece of content.

9
00:00:39,000 --> 00:00:43,080
The first layer or a kind of shell is referred to as padding.

10
00:00:43,080 --> 00:00:47,820
We then have some amount of space for a border and then some amount of space that we referred to as

11
00:00:47,820 --> 00:00:50,080
our margin by default.

12
00:00:50,100 --> 00:00:56,510
For all of our primitive elements we always have a padding of 0 a border of 0 and a margin of 0 as well.

13
00:00:56,820 --> 00:01:00,600
We can make use of some different styling properties to adjust the width of each of these different

14
00:01:00,600 --> 00:01:01,750
layers.

15
00:01:01,750 --> 00:01:03,860
LIM So exactly how.

16
00:01:04,070 --> 00:01:08,810
The first thing we'll do is take a look at our piece of content and decide what side we want to add

17
00:01:08,810 --> 00:01:14,720
some spacing into will then set up a new style property inside of our style sheet and adjust the appropriate

18
00:01:14,720 --> 00:01:20,660
property name so for some piece of content if we want to add some padding above it lad on a property

19
00:01:20,660 --> 00:01:22,110
of padding top.

20
00:01:22,370 --> 00:01:28,430
If we want to add in some border on top we would use border top with infra for margin margin top.

21
00:01:28,530 --> 00:01:32,820
We have very similarly named rules for all the three other sides as well.

22
00:01:32,820 --> 00:01:39,540
So for example padding bottom margin bottom and also margin left border left with padding left and so

23
00:01:39,540 --> 00:01:40,020
on.

24
00:01:40,020 --> 00:01:42,000
Same thing for the right hand side as well.

25
00:01:42,770 --> 00:01:47,500
Now very frequently we do not only want to add in some spacing to just one side at a time.

26
00:01:47,500 --> 00:01:52,210
Instead it's very common for us to want to add in some spacing to multiple different sides.

27
00:01:52,370 --> 00:01:56,820
So to do so we can use some shortcut properties these shortcuts right here.

28
00:01:56,890 --> 00:02:02,500
Our other property names so we can use to essentially assign margin to say all sides of some piece of

29
00:02:02,500 --> 00:02:06,830
content or maybe just on top and bottom or just left and right.

30
00:02:06,880 --> 00:02:08,610
Same thing for padding as well.

31
00:02:08,860 --> 00:02:14,950
And we can also set a border width on all sides using border width so now we've seen some these different

32
00:02:14,950 --> 00:02:15,450
rules.

33
00:02:15,460 --> 00:02:21,650
Let's flip back over to our editor and start playing around with them just a little bit okay.

34
00:02:21,650 --> 00:02:25,970
So back inside my box screen I'm going to find my style's object inside of here.

35
00:02:25,970 --> 00:02:30,490
I'm going to add in two new styling properties or two new styling objects.

36
00:02:30,860 --> 00:02:35,630
So I'll say that I'm going to have a view style I'm going to apply this as you might guess to my view

37
00:02:35,630 --> 00:02:36,710
element right here.

38
00:02:36,890 --> 00:02:41,720
And I'm just going to give it a little border so we can see the entire extents of that view element.

39
00:02:41,720 --> 00:02:52,150
So we'll do a border width of one and a border color of black I'll apply that to my view element with

40
00:02:52,150 --> 00:02:55,120
style is styles not view style.

41
00:02:55,120 --> 00:02:57,900
And then I'll do another style object down here as well.

42
00:02:58,070 --> 00:03:04,370
They'll call textile but this one I will also set up a little bit of a border as well.

43
00:03:04,380 --> 00:03:08,520
They'll do a border with of one and a border color.

44
00:03:08,540 --> 00:03:10,220
But this time I'm going to do red.

45
00:03:10,250 --> 00:03:17,440
Like so then all my text element I'll do style is styles dot text style.

46
00:03:17,470 --> 00:03:19,660
Let's save this and see what we got.

47
00:03:19,750 --> 00:03:21,230
So I'll go to my box demo.

48
00:03:21,550 --> 00:03:22,440
And there we go.

49
00:03:22,450 --> 00:03:28,750
So it's kind of hard to see but we actually have a black outline and then inside of that is a red outline.

50
00:03:28,750 --> 00:03:33,380
So as you can very easily guess the black outline is our view element.

51
00:03:33,460 --> 00:03:37,700
We might even try adding a little bit more border with to it just to get to show all of it more easily.

52
00:03:37,700 --> 00:03:41,110
So I'll change it to 3 I'll save that.

53
00:03:41,200 --> 00:03:43,920
And yeah there we go now it's all a bit easier to see.

54
00:03:44,010 --> 00:03:48,640
So right now our text element has exactly zero margin.

55
00:03:48,640 --> 00:03:53,240
It has a one border in it technically has zero padding as well.

56
00:03:53,380 --> 00:03:57,730
You might notice that there's a lot of extra space to the right hand side of our piece of text.

57
00:03:57,730 --> 00:04:01,610
We'll talk about why all that extra space is right there and just a moment.

58
00:04:01,620 --> 00:04:05,680
So now we can start to play around with some additional styles on our text element and we're going to

59
00:04:05,680 --> 00:04:10,930
see some additional spacing appear on our four different sides of that piece of content.

60
00:04:10,930 --> 00:04:16,930
So to get started let's try adding in some margin above and below that piece of content to do so we

61
00:04:16,930 --> 00:04:20,970
can either set a margin top in the margin bottom or we could use one of our shortcuts.

62
00:04:20,980 --> 00:04:27,220
In this case margin vertical that allows in some margin on the top and bottom of that element.

63
00:04:27,220 --> 00:04:37,190
So on my textile I'll put in a margin vertical of about 20 I'll save it go back to my box demo and now

64
00:04:37,190 --> 00:04:42,890
we can very easily see that there's some space above and below we can do the same thing for margin horizontal

65
00:04:43,160 --> 00:04:45,100
if we'll do 20 there as well.

66
00:04:45,140 --> 00:04:51,020
I'll save once again and yet we get some spacing in the left and right at this point we now have some

67
00:04:51,020 --> 00:04:56,240
margin vertical and horizontal and they're both identical so optionally we might decide to just condense

68
00:04:56,240 --> 00:05:02,070
this down to be a margin of 20 which will apply an equal amount of margin on all four sides.

69
00:05:02,070 --> 00:05:06,000
So I'll save that and we have the exact same thing.

70
00:05:06,180 --> 00:05:11,570
Now we can do something very similar with padding as well or even obviously our border with Let's try

71
00:05:11,580 --> 00:05:16,650
in this case adjusting our border with on the textile I'll go to a border width of 10 and now we're

72
00:05:16,650 --> 00:05:20,170
going to get a really thick border around that piece of Texas.

73
00:05:20,460 --> 00:05:24,930
We could do the same thing with padding as well but I bet you can guess how that's going to work.

74
00:05:24,980 --> 00:05:25,250
OK.

75
00:05:25,290 --> 00:05:30,830
So as you can tell how this kind of box object model stuff not really the worst thing in the world.

76
00:05:30,960 --> 00:05:35,160
Understanding how to set these different widths in these different properties is really easy but where

77
00:05:35,160 --> 00:05:38,970
things start to get a little bit more complicated is understanding how to use it to actually achieve

78
00:05:38,970 --> 00:05:40,890
some complicated layout.

79
00:05:40,950 --> 00:05:45,060
So we're going to eventually take a look at a couple of examples that's going to combine that box object

80
00:05:45,060 --> 00:05:49,880
model along with these two other systems to get some desired layout.

81
00:05:49,920 --> 00:05:51,140
Let's take a quick pause right here.

82
00:05:51,150 --> 00:05:54,950
When we come back the next video we're gonna start to take a look at the Flex box model as well.