Grouping Basics

A block-level element is an element that creates large blocks of content like paragraphs or page divisions. They start new lines of text when you use them, and can contain other blocks as well as inline elements and text or data.

An inline element is an element that define text or data in the document like STRONG makes the enclosed text strongly emphasized and Q says the enclosed text is a quotation. They don't start new lines when you use them, and they generally only contain other inline tags and text or data. Or they include nothing at all, like the BR tag.

There is also a third type of element in HTML - those that aren't displayed at all. These tags are the ones that provide information about the page but don't necessarily show up in the visible portion of the page. For example: STYLE to define styles and stylesheets, META to define meta data, and HEAD to hold those elements.

Inline Formatting is Different from Block Formatting
One of the most common mistakes a newcomer to Web design makes is trying to set a width on an inline element. This is because inline elements don't have widths. That is, they do have widths, but the width is set by the container box. Some other properties that inline elements ignore include:

• width and height
• max-width and max-height
• min-width and min-height

Note: IE incorrectly applies some of these properties even to inline boxes. But you shouldn't rely on that to remain, as it's not standards compliant.

So if you need to define the width or height that an element should take up, you need to apply that to the block-level element containing your inline text.