Intro

If we want to understand the display property, we need to understand the "box model" of CSS display.

The CSS Box Model is a fundamental concept in web design that defines how elements are sized, positioned, and rendered on a webpage. Each HTML element is represented as a rectangular box, which consists of four parts: content, padding, border, and margin.

The Box Model

• Content: This is the area where the actual content of the element is displayed, such as text or images.
• Padding: Space between the content and the element’s border.
• Border: A frame that wraps around the padding and content.
• Margin: Space between the element’s border and neighboring elements.

When setting the width and height of an element, the default box-sizing is content-box, where the specified width and height only apply to the content area, and padding and borders are added to these dimensions.

• For example, if an element has a width of 100px, padding of 20px, and a border of 10px, the total width will be 160px (100 + 20 + 20 + 10 + 10).

To ensure that the width and height properties include the padding and border, you can set box-sizing: border-box on the element. This way, the specified width and height include the padding and border, making it easier to predict the total size of the element.

Block & Inline

Next we need to understand the difference between "block-level" elements, and "inline" elements.

Block-Level Elements: start on a new line and take up the full width available, stretching out to the left and right as far as they can. They also have top and bottom margins by default.

• examples include <div>, <p>, <h1> to <h6>, and <ul>.

Inline elements: do not start on a new line and only take up as much width as necessary. They do not have top and bottom margins by default.

• examples include <span>, <a>, <strong>, and <em>.

Key Differences:

• Line Breaks:
  • Block-level elements always start on a new line.
  • Inline elements do not start on a new line and flow within the content.

• Width:
  • Block-level elements take up the full width of their parent container.
  • Inline elements take up only the necessary width.

• Margins:
  • Block-level elements have top and bottom margins by default.
  • Inline elements do not have top and bottom margins by default.

• Nesting:
  • Block-level elements can contain inline elements.
  • Inline elements can be nested within block-level elements but not vice versa.

Display Properties

And this brings us to our display properties. There are several CSS display properties available for use, but there are four main properties that we will use most often:

• inline: Displays an element as an inline element (like <span>). Any height and width properties will have no effect. This is default. An inline element's width property is only as wide as the content it contains, and it wiil stretch to fit it's content. Can not set height or width.
• block: Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width. Can set the height and width properties.
• inline-block: Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can set the height and width properties.
• none: used to hide an element entirely, removing it from the document flow. This means the element and its space are not rendered in the document, and other elements can occupy the space it would have taken.
  • *note: this is similar to visibility: hidden, which hides an element, but keeps its space in the layout, so other elements can not occupy the space it is taking.