AtoZ CSS Screencast: Display

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

How elements take up space on the page is controlled by their display.

There used to be two broad display types in CSS: elements were inline or block-level.

Block vs. Inline

Block elements start on a new line and fill the width of their parent container. We saw this behaviour in "Episode 1:auto" when we looked at auto dimensions.

inline elements remain in a line and only take up the width of their contents.

HTML5

In HTML5 elements are categorised differently, the broadest categories being “flow content” and “phrasing content”. There are further categories for embedded content, interactive content and form associated content but there’s a lot of cross-overs between these different categories.

Here’s a list of flow content elements. Elements like <div>, article, section and form are block-like elements which often contain many other child elements. But this list also contains a, em, span and input which are inline elements - often found in running text where it would be undesirable for them to start on a new line.

The list of phrasing content elements doesn’t contain a lot of the block-like elements from flow content, but it does include things like em, span and input which were also in the previous list.

It turns out there is no clear mapping of block to flow content and inline to phrasing content so we better look elsewhere.

Continue reading %AtoZ CSS Screencast: Display%

by Guy Routledge via SitePoint