CSS Basics: Unleashing the Potential of the Display Property – A Step-by-Step Guide for Web Designers

Deutsch

CSS Property Display – Behavior of HTML Elements

Every element on a web page is a rectangular box. The CSS display property determines the behavior of that rectangular box. That means it sets wether a box is treated as a block or as an inline element. There are two main categories of HTML elements on a web page: Block Elements and Inline Elements.

Block elements
always start with a new line and take up the entire available space of the parent element. You can specify the width and height property for this type of element.

Inline elements
do not start on a new line and only take up as much space as is necessary to display their content. The width and height cannot be specified for inline elements.

The most important and commonly used block elements are:

Headings   using the <H1> to <H6> tags.
Paragraphs   using the HTML <P> tag.
UL an OL Lists   using the HTML <UL> und <OL> tags.
HTML Tables   using the HTML <TABLE>, <TR> and <TD> tags.
Regions   using the HTML <DIV> tag.

CSS Property display
Description Possible Values Default Value Category
type of display block
inline
inline-block
table
none
grid
flex
initial
inherit		 inline display
positioning

The value shown in orange is the standard use of the CSS display property.

There are even more display property values. To keep things simple, these rarely used display values are not mentioned on this page.

The display property can be used to change the behavior of an HTML element. Typical uses of the display property are:

The browser creates a box for each HTML element and sets a default behavior for it. This default value can be changed individually by using the CSS display property.

Note:

  1. The display property cannot be used to change the type of an HTML element (block or inline). Block elements remain block elements, and inline elements remain inline elements. However, the behavior of the HTML element can be changed. The rule that block elements are not allowed to be contained inside inline elements is still valid.

  2. The display property is used if the behavior of a block element is required for an inline element or the behavior of an inline element is required for a block element.

  3. Block elements create their own paragraphs. This means that an automatic line break (sometimes called line feed) is created before and after the HTML element according to the standard.

  4. An inline element doesn't create its own paragraph. This means that the normal text flow is not interrupted. An inline element is always as wide as it needs to be for the content that it contains. Inline elements are placed side by side by default.

  5. An element with the property display: inline-block is an inline element. However, it is possible to define an outer spacing with margin and an inner spacing with padding.

  6. An important declaration used in practice is display: none. This declaration specifies that no box should be created for the element. An element that is hidden in this way has no effect on subsequent elements in the layout of the page.

    Elements hidden in this way can be re-displayed with any other value for the display property.

    Unlike the display: none property, the visibility: hidden declaration creates a fully transparent box for the element. Elements hidden with visibility: hidden affect subsequent elements in the page layout.

    To hide an element as well as remove it from the document layout, set the display property to the value none instead of using the visibility property.

CSS Layouts Using Display, Position, and Float

The display, position, and float properties allow you to create CSS-based layouts. Depending on the element type, HTML elements are usually positioned one below the other (block elements) or side by side (inline elements). The width of a block element is determined by the width of its parent element.

Specific definitions can be used to align each container and all HTML elements within it as desired. For this purpose, the default alignment for each element must be overridden and redefined.

This sample web page template demonstrates the positioning using the display, position, and float properties as an example of a responsive two-column standard layout.