HTML & CSS #2

Each part of the box model corresponds to a CSS property: width, height, padding, border, and margin.

Let's look these properties inside some code:div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }

There are quite a few values for the display property, but the most common are

block, inline, inline-block, and none.

Exactly how elements are displayed—as block-level elements, inline elements, or something else—is determined by the

display property.

Lastly, using a value of none will completely hide an element and render the page as if that element doesn't exist. Any elements nested within this element will also be hidden.

div { display: none; }

The default height of an element is determined by its content. An element will expand and contract vertically as necessary to accommodate its content. To set a specific height for a non-inline element, use the height property:

div { height: 100px; }

Using the margin or padding property alone, with any number of values, is considered shorthand. With longhand, we can set the value for one side at a time using unique properties. Each property name (in this case margin or padding) is followed by a dash and the side of the box to which the value is to be applied: top, right, bottom, or left. For example, the padding-left property accepts only one value and will set the left padding for that element; the margin-top property accepts only one value and will set the top margin for that element.

div { margin-top: 10px; padding-left: 6px; }

To set unique values for all four sides of an element, specify those values in the order of top, right, bottom, and left, moving clockwise. Here we are placing margins of 10 pixels on the top of a <div>, 20 pixels on the right, 0 pixels on the bottom, and 15 pixels on the left.

div { margin: 10px 20px 0 15px; }

To set one value for the top and bottom and another value for the left and right sides of an element, specify two values: top and bottom first, then left and right. Here we are placing margins of 10 pixels on the top and bottom of a <div> and margins of 20 pixels on the left and right:

div { margin: 10px 20px; }

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 property in action:

div { margin: 20px; }

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:

div { padding: 20px; }

The default width of an element depends on its display value. Block-level elements have a default width of 100%, consuming the entire horizontal space available. Inline and inline-block elements expand and contract horizontally to accommodate their content. Inline-level elements cannot have a fixed size, thus the width and height properties are only relevant to non-inline elements. To set a specific width for a non-inline element, use the width property:

div { width: 400px; }

According to the box model, the total width of an element can be calculated using the following formula:

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

In comparison, according to the box model, the total height of an element can be calculated using the following formula:

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

We can change an element's display property value by selecting that element within CSS and declaring a

new display property value. p { display: block; } A value of block will make that element a block-level element. p { display: inline; } A value of inline will make that element an inline-level element.

Every element has a default display property value; however, as with all other property values, that value may be

overwritten.

Things get interesting with the inline-block value. Using this value will allow an element to behave as a block-level element, accepting all box model properties (which we'll cover soon). However, the element will be displayed in line with other elements, and it will not begin on a new line by default.

p { display: inline-block; }