Block Versus Inline

HTML elements can generally be classified as either block or inline. Block elements take up the full width of their area, and normally have a new line before and after the element. An inline element takes up only the width it requires, and does not force a newline.

Some examples of block elements are p, div, h1, blockquote and ul. Examples of inline elements are span, a, strong,
, and img. Note that the image element actually behaves a little like both types of elements. Table is another element that is not strictly block or inline.

Blocks can contain other blocks and inline elements. They take up the entire width of their parent content box. They normally begin on a new line. Block element are also called block-level elements. They describe structure.

Inline elements can online contain text or other inline elements. They do not break the flow. They also do not form new blocks. Inline elements join with other inline elements horizontally, and wrap only if they reach the end of the parent content box. Inline elements are also called text-level elements. They usually describe the appearance. You cannot set the width of inline elements. Their width are controlled by their containers. Be warned that Internet Explorer does not follow this last rule.

In all of this, you should know that the type (block or inline) that an element normally is can be redefined using the display tag. Here are some more rules. Elements in the body are either block or inline. An inline element cannot be directly under the body level tags. Knowing block and inline can separate you from the rank and file HTML coders.