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 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 work together with block elements to give, for example, text emphasis with the “<em>" element or bold text with the “<strong>" element. Especially useful is the “<span>" 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.
Inline elements inherit inheritable CSS property values of the parent block element in which they are flowing, for example font-family, background, font-size and color.
As opposed to block elements, inline elements ignore CSS values of width and height, vertical padding and vertical margin.