1
00:00:00,000 --> 00:00:02,820
Let's talk about height dimensions.

2
00:00:02,820 --> 00:00:06,480
So we have this thing called a Document Object Model.

3
00:00:06,480 --> 00:00:11,310
And when we right-click on that box and we select it over here,

4
00:00:11,310 --> 00:00:12,690
we come on down.

5
00:00:12,690 --> 00:00:14,430
We can see that we've got margin,

6
00:00:14,430 --> 00:00:18,380
border padding and the actual size of the element itself.

7
00:00:18,375 --> 00:00:21,575
We can check to see what that sizing is.

8
00:00:21,570 --> 00:00:24,020
So we can select that box.

9
00:00:24,015 --> 00:00:28,695
Let's do const boxes equal to dot box.

10
00:00:28,690 --> 00:00:31,280
And then we could do box dot.

11
00:00:31,280 --> 00:00:32,960
We've had a few different things.

12
00:00:32,960 --> 00:00:36,110
We've had outer width and width.

13
00:00:36,110 --> 00:00:38,750
So if we take a look at the width here,

14
00:00:38,750 --> 00:00:40,850
which is actually a function.

15
00:00:40,850 --> 00:00:43,400
So whenever you see this little curly f here,

16
00:00:43,400 --> 00:00:44,930
that usually means it's a function.

17
00:00:44,930 --> 00:00:47,800
That typically means that you simply forgot your parentheses.

18
00:00:47,795 --> 00:00:51,055
So my box width is currently 100.

19
00:00:51,340 --> 00:00:56,760
And let's go ahead and see if I can pop this out. There we go.

20
00:00:57,670 --> 00:01:00,140
We can also do the box.

21
00:01:00,140 --> 00:01:03,310
Height is also a 100.

22
00:01:03,305 --> 00:01:07,015
We can do the box. Outer width is a 100.

23
00:01:07,010 --> 00:01:10,940
We can also do the box inner width is a 100.

24
00:01:10,940 --> 00:01:13,700
And we're going to see that all three of these things are the same,

25
00:01:13,700 --> 00:01:15,230
but they're actually different.

26
00:01:15,230 --> 00:01:18,350
And this depends on the box model.

27
00:01:18,350 --> 00:01:23,340
And so if we go back here and what I wanna do is add some padding.

28
00:01:23,920 --> 00:01:29,030
A 100 pixels. No, let's not do a 100.

29
00:01:29,030 --> 00:01:29,450
That's a lot.

30
00:01:29,450 --> 00:01:30,490
Let's do 20.

31
00:01:30,485 --> 00:01:34,795
And let's do a margin of 20 pixels as well.

32
00:01:34,790 --> 00:01:35,990
And we're gonna see that this bumps

33
00:01:35,990 --> 00:01:41,130
the element and actually made the element look a little bigger.

34
00:01:41,200 --> 00:01:45,290
So now if I go back up, select my box,

35
00:01:45,290 --> 00:01:51,920
and I could do box dot width.

36
00:01:51,920 --> 00:01:56,200
It's now a 100. That's the inside. The inside is a 100.

37
00:01:56,200 --> 00:02:04,330
And we're going to see if we go over to elements that inside here is 100.

38
00:02:04,329 --> 00:02:10,779
Now let's do box dot, inner width.

39
00:02:10,780 --> 00:02:14,340
It's 140. Well, where do we get 1 fourth from?

40
00:02:14,335 --> 00:02:16,545
If we go back to elements, we can see that there's a padding here.

41
00:02:16,540 --> 00:02:18,490
This is the entire box itself,

42
00:02:18,490 --> 00:02:20,260
the inner width of the box.

43
00:02:20,260 --> 00:02:23,710
So we've got a 100 and then we've got 20 on either side.

44
00:02:23,710 --> 00:02:26,650
So 100101140.

45
00:02:26,650 --> 00:02:28,960
That's where we got a 140 from.

46
00:02:28,960 --> 00:02:30,880
Now we can do the outer width as well,

47
00:02:30,880 --> 00:02:33,460
Box dot odor width.

48
00:02:33,460 --> 00:02:35,370
Now we're looking at the outer width here.

49
00:02:35,365 --> 00:02:40,195
And then outer width has two options here.

50
00:02:40,190 --> 00:02:41,770
So we've got regular outer width,

51
00:02:41,765 --> 00:02:46,745
odor width, and this is the outside here.

52
00:02:46,870 --> 00:02:50,480
Or we can do outer width, true.

53
00:02:50,480 --> 00:02:55,180
And what that's going to do is take all of it, including the margin.

54
00:02:55,175 --> 00:03:00,815
So we've had a hundred one hundred twenty one forty one sixty,

55
00:03:00,815 --> 00:03:04,445
one eighty, and that's where we're getting a 180 from.

56
00:03:04,445 --> 00:03:06,565
Now what I would like you to do for

57
00:03:06,560 --> 00:03:09,050
this particular lesson is don't worry about the width,

58
00:03:09,050 --> 00:03:11,210
inner width or outer width.

59
00:03:11,210 --> 00:03:14,360
What I want you to do is do the same thing with height.

60
00:03:14,360 --> 00:03:18,820
So grab your Box element and then do inner height,

61
00:03:18,815 --> 00:03:23,875
or just height or outer height,

62
00:03:23,870 --> 00:03:25,850
and try it with true in there.

63
00:03:25,850 --> 00:03:29,770
Give that a shot. And try with different sizes.

64
00:03:29,765 --> 00:03:30,955
Make your box of different size.

65
00:03:30,950 --> 00:03:33,390
It doesn't have to be a perfect square either.

66
00:03:33,640 --> 00:03:40,400
And then what I want you to do is I want you to select your entire window,

67
00:03:40,400 --> 00:03:42,650
that is your entire viewport,

68
00:03:42,650 --> 00:03:49,660
and then do width and height.

69
00:03:49,655 --> 00:03:51,475
Now, just as a heads up,

70
00:03:51,470 --> 00:03:54,800
my height is very low just because I am super zoomed in here.

71
00:03:54,800 --> 00:03:59,040
If I wasn't zoomed in, this would be significantly higher than 289.

72
00:03:59,044 --> 00:04:00,984
Go ahead and give this a shot.

73
00:04:00,980 --> 00:04:03,190
These are important when you're working with

74
00:04:03,185 --> 00:04:05,815
positioning things on your page using JavaScript.

75
00:04:05,810 --> 00:04:09,710
So you are going to need to know how these work when you're done that,

76
00:04:09,710 --> 00:04:12,130
let's head on over to the next lesson where we talk about

77
00:04:12,125 --> 00:04:18,455
a new event listener where it checks to see if we're resizing our page at all.