CSS Layout: The Display Property

The display property is one of the most important CSS properties for controlling layout. It defines how an element should be displayed and how it interacts with other elements on the page. Essentially, it determines the *box model* of an element, which dictates its dimensions, spacing, and how it flows within the document.

By default, HTML elements have a default display value. For example, <div> elements are block elements, while <span> elements are inline elements. The display property allows you to override these defaults and customize the layout as needed.

Exploring Display Property Values

block

Block-level elements take up the full width available (unless a width is specified) and start on a new line. They have top and bottom margins. Common block-level elements include <div>, <p>, <h1> to <h6>, <ul>, <ol>, and <li>.

inline

Inline elements only take up as much width as necessary to fit their content. They do not start on a new line and flow with the surrounding text. Width and height properties have no effect on inline elements. Only left and right margins/padding take effect (but top and bottom do not). Common inline elements include <span>, <a>, <img>, and <strong>.

inline-block

Inline-block elements are a hybrid of inline and block elements. They flow like inline elements (they sit on the same line as other content) but they can have width and height set, and margins/padding on all sides take effect. This makes them useful for creating navigation menus or grid-like layouts without using floats or flexbox.

none

The none value completely removes an element from the document flow. It is as if the element does not exist in the HTML. It's important to note that display: none; is different from visibility: hidden;. visibility: hidden; hides the element, but it still occupies space on the page, while display: none; removes it entirely.

Other Values (Briefly)

Besides the values above, there are other display values like flex, grid, table, and others, which are used for more advanced layout techniques. We won't cover them in detail here, but they are important to learn as you become more proficient in CSS.