Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Working with Inline Elements | Section
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
CSS Fundamentals for React Developers - 1768407374224

bookWorking with Inline Elements

Inline elements stay on a single line and wrap to the next line when space runs out. This behavior is controlled by the CSS property display: inline.

Key points about inline elements:

  • They default to display: inline;
  • Their width and height are determined by their content and cannot be explicitly set;
  • Only horizontal properties like padding, margin, and border can be applied.

Let's examine an example where some styles impact the element, while others do not, within the CSS file:

index.html

index.html

index.css

index.css

copy
Note
Study More

By default, inline elements have a gap on the right side; for img elements, this gap is at the bottom. This space is not attributed to padding or margin. Instead, it's an inherent blank space added by browsers to ensure a distance between each element.

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 25

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

bookWorking with Inline Elements

Desliza para mostrar el menú

Inline elements stay on a single line and wrap to the next line when space runs out. This behavior is controlled by the CSS property display: inline.

Key points about inline elements:

  • They default to display: inline;
  • Their width and height are determined by their content and cannot be explicitly set;
  • Only horizontal properties like padding, margin, and border can be applied.

Let's examine an example where some styles impact the element, while others do not, within the CSS file:

index.html

index.html

index.css

index.css

copy
Note
Study More

By default, inline elements have a gap on the right side; for img elements, this gap is at the bottom. This space is not attributed to padding or margin. Instead, it's an inherent blank space added by browsers to ensure a distance between each element.

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 25
some-alt