WEBVTT

1
00:00:00.003 --> 00:00:02.003
- [Instructor] Some elements have default margin

2
00:00:02.003 --> 00:00:03.002
and padding styles,

3
00:00:03.002 --> 00:00:04.005
which can make it hard to tell

4
00:00:04.005 --> 00:00:06.005
where the space is coming from.

5
00:00:06.005 --> 00:00:08.000
To identify the source,

6
00:00:08.000 --> 00:00:11.001
we can use the built-in browser developer tools

7
00:00:11.001 --> 00:00:12.009
to inspect the element.

8
00:00:12.009 --> 00:00:15.000
Let's go over an example.

9
00:00:15.000 --> 00:00:16.009
If you'd like to follow along,

10
00:00:16.009 --> 00:00:21.000
open the box-model.html page in your browser.

11
00:00:21.000 --> 00:00:23.004
It can be found in the exercise files,

12
00:00:23.004 --> 00:00:28.003
in chapter three, video 03_06.

13
00:00:28.003 --> 00:00:30.008
I'll be using Firefox and Chrome for this demo,

14
00:00:30.008 --> 00:00:32.009
but the developer tools in other browsers

15
00:00:32.009 --> 00:00:35.004
will have similar functionality.

16
00:00:35.004 --> 00:00:37.001
I'll start with Firefox.

17
00:00:37.001 --> 00:00:39.008
To inspect an element and open the dev tools,

18
00:00:39.008 --> 00:00:43.007
hover over an element with your mouse or track pad.

19
00:00:43.007 --> 00:00:46.005
Let's go with Heading 1.

20
00:00:46.005 --> 00:00:49.004
Then, right-click or use a two finger tap

21
00:00:49.004 --> 00:00:55.004
to open the menu and select Inspect or Inspect Element.

22
00:00:55.004 --> 00:00:58.007
A panel will open showing the page's HTML

23
00:00:58.007 --> 00:01:01.005
and the corresponding CSS.

24
00:01:01.005 --> 00:01:03.000
My h1 is highlighted,

25
00:01:03.000 --> 00:01:05.001
since that's the element I inspected,

26
00:01:05.001 --> 00:01:07.003
but if you weren't able to select the element

27
00:01:07.003 --> 00:01:08.008
you were hoping to inspect,

28
00:01:08.008 --> 00:01:12.009
you can just click on the element in the HTML panel.

29
00:01:12.009 --> 00:01:16.007
Another option is to click the pointer icon,

30
00:01:16.007 --> 00:01:20.006
then hover over the element in the viewport.

31
00:01:20.006 --> 00:01:22.005
Click on it to select it.

32
00:01:22.005 --> 00:01:24.004
In Firefox, there's a visualization

33
00:01:24.004 --> 00:01:27.000
of the box model styles for the selected element

34
00:01:27.000 --> 00:01:30.005
shown in its own panel under the Layout tab.

35
00:01:30.005 --> 00:01:33.004
In Chrome, you'll see it in the Styles tab,

36
00:01:33.004 --> 00:01:36.007
underneath the CSS declarations.

37
00:01:36.007 --> 00:01:38.003
The color coding is a bit different,

38
00:01:38.003 --> 00:01:41.001
but the visualization is the same.

39
00:01:41.001 --> 00:01:42.002
The styles shown here

40
00:01:42.002 --> 00:01:45.000
can come from either the default browser styles

41
00:01:45.000 --> 00:01:47.005
or CSS we've added to the project.

42
00:01:47.005 --> 00:01:50.007
The styles listed under user agent stylesheet

43
00:01:50.007 --> 00:01:53.008
is the default browser styles.

44
00:01:53.008 --> 00:01:56.000
And the styles listed using the file name

45
00:01:56.000 --> 00:01:58.000
are the styles we added.

46
00:01:58.000 --> 00:02:00.000
The 8 at the end of the line

47
00:02:00.000 --> 00:02:04.005
is where the style is contained in the file.

48
00:02:04.005 --> 00:02:09.000
If I click on it, here is what the HTML markup looks like,

49
00:02:09.000 --> 00:02:13.002
and this h1 style is on line 8.

50
00:02:13.002 --> 00:02:14.009
Let's click back on the Elements tab

51
00:02:14.009 --> 00:02:18.000
to get back to our HTML and CSS.

52
00:02:18.000 --> 00:02:22.005
In Firefox, the user agent styles are turned off by default.

53
00:02:22.005 --> 00:02:23.007
To turn this feature on,

54
00:02:23.007 --> 00:02:26.005
select the three dots in the toolbar,

55
00:02:26.005 --> 00:02:28.004
select Settings,

56
00:02:28.004 --> 00:02:33.003
and under Inspector, check Show Browser Styles.

57
00:02:33.003 --> 00:02:35.008
And let's go back to see Inspector

58
00:02:35.008 --> 00:02:37.007
to see the HTML and CSS,

59
00:02:37.007 --> 00:02:40.006
and now we could see the user agent styles.

60
00:02:40.006 --> 00:02:44.008
Okay, let's go back to looking at the box model styles.

61
00:02:44.008 --> 00:02:47.001
We can see the size of the content box,

62
00:02:47.001 --> 00:02:50.002
which is the text between the h1 tags,

63
00:02:50.002 --> 00:02:52.001
followed by the padding and border,

64
00:02:52.001 --> 00:02:53.007
which surround the content,

65
00:02:53.007 --> 00:02:57.000
and the margin around the entire element.

66
00:02:57.000 --> 00:02:58.002
In the CSS panel,

67
00:02:58.002 --> 00:03:01.003
we can see the padding and border styles that I've added.

68
00:03:01.003 --> 00:03:03.001
Says there is 10 pixels of padding,

69
00:03:03.001 --> 00:03:06.007
which is also reflected in the diagram.

70
00:03:06.007 --> 00:03:08.006
Let's uncheck the padding declaration

71
00:03:08.006 --> 00:03:10.006
to temporarily remove the style,

72
00:03:10.006 --> 00:03:14.004
which will be reflected in the diagram, as well.

73
00:03:14.004 --> 00:03:17.003
Now it says there's zero padding.

74
00:03:17.003 --> 00:03:19.008
Check the style to add it back in.

75
00:03:19.008 --> 00:03:21.004
You can even edit these values

76
00:03:21.004 --> 00:03:23.006
to experiment right in the browser.

77
00:03:23.006 --> 00:03:26.001
Just click on the declaration to make a change.

78
00:03:26.001 --> 00:03:31.004
Let's change the border to one pixel.

79
00:03:31.004 --> 00:03:33.009
Note that these values are not saved

80
00:03:33.009 --> 00:03:36.000
to the actual CSS file.

81
00:03:36.000 --> 00:03:38.003
This is just for testing and debugging.

82
00:03:38.003 --> 00:03:39.008
If we refresh the browser,

83
00:03:39.008 --> 00:03:44.006
it will reset any changes made in the dev tools.

84
00:03:44.006 --> 00:03:46.000
For the margin box,

85
00:03:46.000 --> 00:03:49.007
this is the default margin we're looking at.

86
00:03:49.007 --> 00:03:51.000
In the box model diagram,

87
00:03:51.000 --> 00:03:53.001
the left and right values for margin are zero,

88
00:03:53.001 --> 00:03:55.002
because the default styles are only applied

89
00:03:55.002 --> 00:03:56.009
to the top and bottom.

90
00:03:56.009 --> 00:03:59.005
If you hover over the various Box Model Properties,

91
00:03:59.005 --> 00:04:02.005
the corresponding color coded areas will be highlighted

92
00:04:02.005 --> 00:04:03.009
in the viewport as well,

93
00:04:03.009 --> 00:04:06.007
which can be super helpful when debugging.

94
00:04:06.007 --> 00:04:07.005
While we're here,

95
00:04:07.005 --> 00:04:11.005
let's talk about a behavior called margin collapsing.

96
00:04:11.005 --> 00:04:16.002
When I hover over the h1 in the HTML panel,

97
00:04:16.002 --> 00:04:21.002
we can see the margin bottom space highlighted in yellow,

98
00:04:21.002 --> 00:04:24.000
which stops right above the content box

99
00:04:24.000 --> 00:04:26.001
of the h2 below it.

100
00:04:26.001 --> 00:04:28.005
Now, if I hover over the h2,

101
00:04:28.005 --> 00:04:35.000
the margin top stops right below the content box of the h1.

102
00:04:35.000 --> 00:04:38.006
So both of these margins are occupying the same space,

103
00:04:38.006 --> 00:04:41.008
even though they're coming from two different elements.

104
00:04:41.008 --> 00:04:45.007
This behavior only affects the top and bottom margins.

105
00:04:45.007 --> 00:04:47.001
In the next lesson,

106
00:04:47.001 --> 00:04:51.001
I'll go over how to manage this margin collapsing with CSS.

107
00:04:51.001 --> 00:04:54.007
We just did a quick overview of the browser developer tools,

108
00:04:54.007 --> 00:04:56.009
but there are more features to explore.

109
00:04:56.009 --> 00:04:58.005
We'll continue to use the dev tools

110
00:04:58.005 --> 00:04:59.007
throughout the rest of this course,

111
00:04:59.007 --> 00:05:02.003
but if you would like to dive a little deeper,

112
00:05:02.003 --> 00:05:05.005
check out my Workflow Tools for Web Developers course.