You can affect the way a user agent displays by setting a value for the property display. Now that we’ve taken a close look at visual formatting, let’s consider the display property and discuss two more of its values using concepts from earlier in the book.

Altering Element Display

Values: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
Initial Value:  inline
Applies to:  All Elements
Inherited:  No
Computed value: Varies for floated, positioned, and root elements otherwise, as specified

We’ll ignore the table-related values, since they’re far too complex for this text, and we’ll also ignore the value list-item since it’s very similar to block boxes. We’ve spent quite some time discussing block and inline boxes, but let’s spend a moment talking about how altering an element’s display role can alter layout before we look at inline-block and run-in.

« Back to Glossary Index