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

Working with Block-Level ElementsWorking with Block-Level Elements

Block-level elements can be identified as rectangular, and they stack on top of each other. They prevent any other elements from sharing the same line with them. This behavior is achieved by applying the CSS property:

blcok level elements example

Main considerations when working with block-level elements:

  • They are inherently set to display: block;
  • Their width spans the entire width allowed by the parent element;
  • The height is initially determined by content, but it can be customized using CSS;
  • Each block element starts on a new line;
  • Properties like border, margin, padding, width, and height can be adjusted.

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

html

index.html

css

index.css

js

index.js

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

html

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

Sección 3. Capítulo 8

Working with Block-Level ElementsWorking with Block-Level Elements

Block-level elements can be identified as rectangular, and they stack on top of each other. They prevent any other elements from sharing the same line with them. This behavior is achieved by applying the CSS property:

blcok level elements example

Main considerations when working with block-level elements:

  • They are inherently set to display: block;
  • Their width spans the entire width allowed by the parent element;
  • The height is initially determined by content, but it can be customized using CSS;
  • Each block element starts on a new line;
  • Properties like border, margin, padding, width, and height can be adjusted.

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

html

index.html

css

index.css

js

index.js

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

html

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

Sección 3. Capítulo 8
some-alt