Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Working with Block-Level Elements | The CSS Box Model & Spacing Elements
CSS Fundamentals

bookWorking with Block-Level Elements

Block-level elements are rectangular and stack on top of each other, preventing other elements from sharing the same line. This behavior is controlled by the CSS property display: block.

Key points about block-level elements:

  • They default to display: block;
  • Their width spans the full width of the parent container;
  • Their height is determined by the content but can be customized with CSS;
  • They always start on a new line;
  • Properties like border, margin, padding, width, and height can be adjusted.

Let's explore an example where we manipulate width, height, and margin:

index.html

index.html

index.css

index.css

copy

Let's consider how we can center an element inside its parent.

index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 8

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

bookWorking with Block-Level Elements

Block-level elements are rectangular and stack on top of each other, preventing other elements from sharing the same line. This behavior is controlled by the CSS property display: block.

Key points about block-level elements:

  • They default to display: block;
  • Their width spans the full width of the parent container;
  • Their height is determined by the content but can be customized with CSS;
  • They always start on a new line;
  • Properties like border, margin, padding, width, and height can be adjusted.

Let's explore an example where we manipulate width, height, and margin:

index.html

index.html

index.css

index.css

copy

Let's consider how we can center an element inside its parent.

index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 8
some-alt