Original subtitles

1 1

Welcome back. 2

2

I will now quickly go over yet another 3

3

very important concept in CSS. 4

4

The box model. 5

5

So. 6

6

Basically, all HTML elements can be seen as boxes. 7

7

What the box model does 8

8

is to allow us to define space 9

9

between elements 10

10

and to add a border around elements. 11

11

The box model consists of margins, 12

12

padding, borders and actual content of the box. 13

13

For instance, text. 14

14

This image shows very well how the box model works. 15

15

So, 16

16

the content is where text and images appear. 17

17

Padding is like a transparent area around the content, 18

18

but inside of the box. 19

19

The border of the box 20

20

goes around the padding and the content. 21

21

It may be transparent, or not. 22

22

And finally, the margin is the space between boxes. 23

23

Now, padding, margin and border 24

24

are properties in CSS, 25

25

and can be specified for the entire box 26

26

or for individual sides. 27

27

Top, bottom, left or right. 28

28

We'll use all of them later. 29

29

The box model also allows us to set 30

30

the height and the width of an element. 31

31

Now, the annoying thing about the standard box model 32

32

that I just showed you 33

33

is that you just set the height 34

34

and the width of the content. 35

35

Not of the entire box itself. 36

36

This means that padding, margin and border 37

37

will be added to the height and width we specify. 38

38

Which is actually not what we want. 39

39

But fortunately, 40

40

we have a good solution for that. 41

41

There is this very useful CSS property 42

42

called box-sizing. 43

43

If we set box-sizing to border-box, 44

44

the height and the width 45

45

will be defined for the entire box. 46

46

We will use this in a second. 47

47

'Cause there is one last thing 48

48

I need to tell you about the box model. 49

49

In HTML, there are block elements 50

50

and inline elements. 51

51

Block elements use the full width of the browser 52

52

and force line breaks. 53

53

Headings and paragraphs are examples of block elements. 54

54

And inline elements don't do any of that. 55

55

For instance, 56

56

images, links, strong and em elements 57

57

are all inline elements. 58

58

What's important about them 59

59

is that you can either set their height or their width. 60

60

But enough with theory lectures. 61

61

Let's get our hands dirty with what we just learned 62

62

and get back to brackets. 63

63

As you can see, 64

64

on our web page 65

65

here in Google Chrome, 66

66

there are already some margins between elements. 67

67

For example this one here, 68

68

and this one. 69

69

It all full of margins, 70

70

already. 71

71

And that's because all browsers 72

72

add some default margins 73

73

if we don't specify any. 74

74

So let's start by remove the default values. 75

75

And to do that, 76

76

we create some rules 77

77

that will affect all elements on our web page, 78

78

using the asterisk selector. 79

79

Which goes like this. 80

80

So we just type this. 81

81

Now all elements are affected. 82

82

That's why you have these blue boxes here, 83

83

around all the elements. 84

84

This is a way of brackets showing us 85

85

that all these elements are affected 86

86

by this selector. 87

87

Now, here we've set all margins and paddings to 0. 88

88

And that's how it works. 89

89

Just write margin: 0; 90

90

and also padding: 0;. 91

91

So you see, all the margins completely disappeared. 92

92

Now, do you remember the box-sizing property? 93

93

We want to set it to border-box 94

94

for all elements. 95

95

And this is the right place 96

96

to do exactly that. 97

97

So. 98

98

Let's write box-sizing, 99

99

and then choose border-box. 100

100

Save it, 101

101

and alright. 102

102

So, no margins and no paddings anymore. 103

103

Now, I think we should add some margins 104

104

to some of the elements. 105

105

First, I would say 106

106

that the main heading needs some margin, right? 107

107

This main heading right here. 108

108

So remember. 109

109

Margin is the white space between boxes. 110

110

We want some margin these two headings, 111

111

the h1 and the h2 heading. 112

112

So we add a margin-bottom to the h1 element. 113

113

So if we remember, I said we could specify 114

114

the margins to all the sides of an element. 115

115

And so now, 116

116

I will specify the margin at the bottom. 117

117

And let's put 20px here. 118

118

That looks like a reasonable amount of white space here. 119

119

And now the same thing for the secondary headings. 120

120

Because, you know, I also don't like 121

121

that there's no space between the h2 element 122

122

and the paragraphs. 123

123

So it's again, margin-bottom. 124

124

And here, I think 10px might be enough. 125

125

Okay. 126

126

That looks much better, don't you think? 127

127

Finally, I would like to add some margin 128

128

after the main paragraphs. 129

129

So if you remember, 130

130

the main paragraphs are 131

131

this one 132

132

and this one. 133

133

And we defined it in the lecture before, 134

134

using this class here. 135

135

So again, margin-bottom. 136

136

And let's do it 20px. 137

137

So we get some nice spacing here. 138

138

So it looks a little bit cleaner right now. 139

139

And that's it for this lecture. 140

140

I hope you learned a lot about the box model. 141

141

Which is really, really important. 142

142

So if you didn't, just go back 143

143

and look at it again. 144

144

Because in the next lecture, 145

145

we will really need it 146

146

because we will start to build a simple layout, 147

147

where we will use the concept 148

148

that I showed you in this lecture. 149

149

So, 150

150

see you there.