A block-level element is an element that creates large blocks of content like paragraphs or
pagedivisions. 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.
Changing the Type of an Inline Element to Block and Vice Versa
With CSS you can change the type of an element from inline to block or the reverse with just one CSS property:
display: block;
display:inline;
display:none;
The CSS property display lets
you change an inline property to block or a block to inline or either of them to not display at all.
When to Change the Display Property
In general, I like to leave the display property alone, but there are some cases where turning a block-level element into an inline and vice versa can be useful.
- Horizontal list menus - Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element, so that newlines aren't added between each list item.
- Headers in the text - Sometimes you might want a header to remain in the text, but have the HTML header values. Changing the h1-h6 values to inline will let the following text flow next to it.
- Removing the element - And of course, if you want to remove the element completely from the document flow, you can set the display to none.