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

Contenuti del Corso

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
2. Styling Text in CSS
3. The CSS Box Model & Spacing Elements
4. Mastering Flexbox for Layouts
5. Adding Decorative Effects with CSS

book
Working 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:

html

index.html

css

index.css

copy

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

html

index.html

css

index.css

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 8
Siamo spiacenti che qualcosa sia andato storto. Cosa è successo?
some-alt