Block and Inline

You've seen how margin, border, and padding appear on a div, which is a block element. The story is different for inline elements. Ask yourself how the layers are treated differently by examining this styled span:

The following observations can be made:

• Only horizontal margins affect inline elements. Any vertical margin is ignored.
• The horizontal padding creates visible space, but the vertical padding bleeds into the surrounding content.
• The width and height are completely ignored, thank goodness.

By using inline elements, you are ceding control of the layout of the content to the browser, whose job is to automatically arrange and wrap inline elements to form flowing lines.

Each element has a default mode: it's either inline or block. Image elements, spans, form inputs, and anchors are all inline elements by default. Headings, list items, lists, blockquotes, divs, and paragraphs are all block elements by default. An element's mode can be changed through the display property:

Using a div in the first place would have been better than turning a span into a block element. For elements besides div and span, display is the only way to override the mode assigned by the browser.

As you build interfaces on the web, you will invariably start organizing content into cards or tiles. You will have the following competing desires:

• You want full control over the sizing and vertical spacing.
• You want the cards to flow in lines.

These desires seem incompatible. Flowing lines require inline elements, but inline elements don't give you full control of the boxes. There's a happy medium: inline-block. An element whose display property is set to inline-block behaves like an inline element in regards to flow but like a block element in regards to sizing and spacing.

Consider this set of playing card prototypes that use inline-block:

Try switching the display property to block and inline to see the differences between the three modes.