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

Sizing Inline-Level Elements
Please keep in mind that inline-level elements will not accept the width and
height properties or any values tied to them. Block and inline-block elements
will, however, accept the width and height properties and their corresponding
values.
Margin & Padding
Depending on the element, browsers may apply default margins and padding to an element
to help with legibility and clarity. We will generally see this with text-based elements. The
default margins and padding for these elements may differ from browser to browser and
element to element. In Lesson 1 we discussed using a CSS reset to tone all of these default
values down to zero. Doing so allows us to work from the ground up and to specify our
own values.
Margin
The margin property allows us to set the amount of space that surrounds an element.
Margins for an element fall outside of any border and are completely transparent in color.
Margins can be used to help position elements in a particular place on a page or to provide
breathing room, keeping all other elements a safe distance away. Here's the margin prop-
erty in action:
1. div {
2. margin: 20px;
3. }
One oddity with the margin property is that vertical margins, top and bottom , are not
accepted by inline-level elements. These vertical margins are, however, accepted by block-
level and inline-block elements.
Padding
The padding property is very similar to the margin property; however, it falls inside of
an element's border, should an element have a border. The padding property is used to
provide spacing directly within an element. Here's the code:
1. div {
2. padding: 20px;
3. }