Learn the Difference Between CSS Block versus Inline Elements

CSS: Block vs. Inline

When working with HTML elements, it is important to know the difference between inline and block elements, sometimes called block-level, elements, so that: you are able to make the right decisions about when and where to use each type; you are aware of the possibilities you have to manipulate them with CSS; you can identify and correct problems more easily when they arise.

Who Decides?

Most HTML elements start out with the initial CSS value of “display:inline”. Which of these elements should then be overwritten to “display:block”, is decided by the default CSS of the browser (User Agent) you are using.

The sample default User Agent CSS suggests block-level CSS property values of “display:block” on the following elements - html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre - the “display:list-item” on the li element, and the “display:table-XX” values, on table elements, tr, thead, tbody, tfoot, col, colgroup, td, th and caption.

All other elements of the “Visual Formatting Model” thus remaining inline-level elements with the CSS properties of “display:inline”, “display:inline-block” or “display:inline-table”.

A Visual Peek at Block Versus Inline

Researching the theme of CSS block versus inline, takes the visitor to a maze of explanations and theories, where not getting confused is a real wonder. I therefore hope to shed a small flood of light for the eyes with a visual explanation of the two.

Block Elements

Block elements are the building blocks of your website. As versus the inline CSS element, the block element generates an independent box, and as such, is always given a new line. Easily recognizable “display:block” examples are the header elements - h1, h2, h3, h4, h5, h6 - and the paragraph - p - element.

The accompanying image shows block elements in an order in which they are commonly used, the elements h1, h2 and p are placed inside a 600 pixel wide div, the red border lets you see how the blocks are working. Each block element is on a new line, the blocks are placed vertically one after the other, and are separated by margins (about collapsing margins). Even if the content text of an element, for example h1, does not require the full width of space in the containing div, the block element takes it nevertheless.

Other related styling differences for the block element regarding the issue, CSS block versus inline are:

• height and width dimensions
• vertical padding
• vertical margins

all of which, unlike inline elements, are respected when applying CSS values.

Inline Elements

Inline elements work together with block elements to give, for example, text emphasis with the “” element or bold text with the “” element. Especially useful is the “” element which, together with the addition of CSS properties, can be used, to manipulate CSS properties like color, font-weight and text-transform, allowing you to create attractive and eye catching snippets within the text of a block-level element.