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
The following observations can be made:
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
div in the first place would have been better than turning a
span into a block element. For elements besides
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:
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
Try switching the
display property to
inline to see the differences between the three modes.