Opening the Box Model - Learn to Code HTML and CSS: Develop and Style Websites - page 51

Lesson 4. Opening the Box Model
We've familiarized ourselves with HTML and CSS; we know what they look like and how
to accomplish some of the basics. Now we're going to go a bit deeper and look at exactly
how elements are displayed on a page and how they are sized.
In the process we'll discuss what is known as the box model and how it works with HTML
and CSS. We're also going to look at a few new CSS properties and use some of the length
values we covered in Lesson 3 . Let's begin.
How Are Elements Displayed?
Before jumping into the box model, it helps to understand how elements are displayed.
In Lesson 2 we covered the difference between block-level and inline-level elements. To
quickly recap, block-level elements occupy any available width, regardless of their content,
and begin on a new line. Inline-level elements occupy only the width their content requires
and line up on the same line, one after the other. Block-level elements are generally used
for larger pieces of content, such as headings and structural elements. Inline-level elements
are generally used for smaller pieces of content, such as a few words selected to be bold or
italicized.
Display
Exactly how elements are displayed—as block-level elements, inline elements, or something
else—is determined by the display property. Every element has a default display property
value; however, as with all other property values, that value may be overwritten. There are
quite a few values for the display property, but the most common are block , inline ,
inline-block , and none .
We can change an element's display property value by selecting that element within CSS
and declaring a new display property value. A value of block will make that element a
block-level element.
1. p {
2. display: block;
3. }
A value of inline will make that element an inline-level element.
1. p {
2. display: inline;
3. }