The CSS Display Property — Reintroducing A Familiar Friend

A few weeks ago I received an email from Pedro Reis asking if I would write a post about the css display property. I thought it would make for an interesting topic as the display property sits at the heart of a lot of what we do in css layouts.

Pedro was specifically interested in the table values for display, though, since they deserve a full post I’ll save the css table talk until next week.

For now I want to look at all the other values for display. There’s more than you might realize.

The CSS Display Property

You probably don’t set the display property all that often and yet you use it all the time.

All elements have a default display and most of the time that default is exactly what you want. In fact when you choose to use a div, it’s mainly because of it’s default display value of block.

Let’s take a look at some of the values display can take. Again I’ll leave the table values until next week.

• block
• inline
• inline-block
• list-item
• none
• inherit

There are a few other values, which we’ll get to later in this post, but above are the basics.

I’m sure they’re all familiar to you and yet they deserve a little more explorations, particularly in the differences between block and inline boxes.

Block and Inline Formatting Contexts

Block level elements are laid out according to the box model, where each block has a width and height, as well as vertical and horizontal padding, border, and margin. Blocks are displayed vertically one after the other, with the distance between them depending on the margins set.

Vertical margins collapse. If one box has a margin-bottom of 30px and the other has a margin-top of 20px, there isn’t 50px of space between them. The margins collapse to the larger value so there would only be 30px of space between the blocks.

Inline elements are displayed horizontally and don’t follow the box model. Horizontally their padding and margin is respected, but not so vertically. The heights of inline boxes are set according to the rules of line-height calculations. For the most part that will mean the height of the containing block.

The are 2 key differences between block and inline boxes.

1. Block elements are laid out vertically while inline elements are laid out horizontally
2. Block elements form a new box according to the box model, while inline elements don’t

Inline-block elements are a combination of the two. They act like inline boxes on the outside, being laid out horizontally, but they’re block level boxes on the inside. They do form a new box and have vertical paddings and margins.

List-items behave like block level elements with the addition of an extra box (the marker box) used to place a marker. Ordered and unordered lists are one containing block level box with several block and market box combinations inside.

When the value of display is set to none, no box of any kind is created. The element has effectively been removed from the document flow and other elements behave as though it doesn’t exist.

Inherit naturally means to use the same value as set on the parent element.

I realize these are simple concepts, but they do sit at the foundation of so many other things where css layouts are concerned.

For example floating a block level element changes it from being laid out vertically to horizontally. Positioning the same box has other elements treating it as though its display was set to none, while the box treats itself as the same block level element it’s always been.

Other Display Values

I mentioned above there are more values for display. Some are seldom used and others while not used much now, likely will in the future.

• run-in
• flexbox
• grid
• templates (display: abc) — there’s no value templates, rather the template module allows for a variety of different values
• ruby

I’ve covered flexbox previously and will point you there for details. I’d like to cover both grids and templates in future posts so I’ll save more details for those posts. I hope you don’t mind.

Today I’ll briefly touch on run-in and ruby.

Run-in Boxes

The W3C gives the following rules for run-in boxes.

• If the run-in box contains a block box, the run-in box becomes a block box.
• If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
• Otherwise, the run-in box becomes a block box.

Chris Coyier does a better job of explaining why you’d actually use display: run-in.

It’s essentially a way to get page headings to sit inline with the text that follows them. Floating the headings or setting them to display: inline won’t work.

Browser support is growing for run-in, but it’s still not what you’d call great.

The CSS Ruby Model

Ruby is the commonly used name for a run of text that appears in the immediate vicinity of another run of text. One of these runs of text is considered the base and the other the text. The base serves as an annotation and pronunciation guide for the text.

If after reading the above you said “huh?” to yourself then you did what I did when reading about ruby in the spec.

It mainly applies to East Asian languages and East Asian typography and I won’t pretend to know much about either.

An element set to display as ruby has it’s own ruby box model and there are actually several ruby display properties.

• ruby
• ruby-base
• ruby-text
• ruby-base-container
• ruby-text-container

I’m going to guess most of you won’t encounter display: ruby beyond this post and instead of trying to present more details I’ll just point you again to the W3C ruby spec if you’re interested in knowing more.

Summary

Every element behaves according to one of the display property values. Most elements will either display as either block or inline. List items naturally default to list-item. Odds are you don’t set the display property all that often and generally fine with the defaults.

I realize this post is probably rather basic for many of you. Hopefully it helped clear up something about the difference between block and inline boxes or introduced you to a new display value you’d like to explore.

Next week I’ll take a look at the display values we didn’t talk about today, namely those values that are associated with the css table module.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.