Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende ¿Qué es el modelo de caja de CSS? | El Modelo de Caja de CSS y Elementos de Espaciado
Fundamentos de CSS

book¿Qué es el modelo de caja de CSS?

Los elementos HTML se representan como cajas rectangulares en una página web. Cada elemento tiene su área de contenido, relleno (padding), borde y margen.

  • El relleno (padding) es el área entre el contenido y el borde, que puede utilizarse para agregar espacio entre el contenido y el borde;
  • El borde rodea el elemento. Por defecto, el ancho del borde es 0. Además, si no se especifica el color del borde, este toma el color del contenido;
  • El margen es el espacio entre el borde y otros elementos en la página.
index.html

index.html

styles.css

styles.css

copy

Nota

Por defecto, algunos elementos tienen propiedades predeterminadas de padding y margin. Esto se hizo para garantizar que una página web sea legible incluso sin ningún estilo.

Propiedades width y height

Las propiedades width y height se utilizan para definir el tamaño de un elemento. El ancho y la altura de un elemento pueden variar según el tipo de modelo de caja.

index.html

index.html

styles.css

styles.css

copy

También es importante mencionar que, para la mayoría de los elementos, suele ser suficiente definir únicamente la propiedad width, ya que la height se determina automáticamente. Esto ayuda a evitar problemas de desbordamiento cuando el width o height del contenido es menor que el contenido interno.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 1

Pregunte a AI

expand

Pregunte a AI

ChatGPT

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

Suggested prompts:

Can you explain the difference between padding and margin again?

How does the box model affect the layout of elements on a web page?

What happens if I set both width and height for a div with a lot of content?

Awesome!

Completion rate improved to 2.56

book¿Qué es el modelo de caja de CSS?

Desliza para mostrar el menú

Los elementos HTML se representan como cajas rectangulares en una página web. Cada elemento tiene su área de contenido, relleno (padding), borde y margen.

  • El relleno (padding) es el área entre el contenido y el borde, que puede utilizarse para agregar espacio entre el contenido y el borde;
  • El borde rodea el elemento. Por defecto, el ancho del borde es 0. Además, si no se especifica el color del borde, este toma el color del contenido;
  • El margen es el espacio entre el borde y otros elementos en la página.
index.html

index.html

styles.css

styles.css

copy

Nota

Por defecto, algunos elementos tienen propiedades predeterminadas de padding y margin. Esto se hizo para garantizar que una página web sea legible incluso sin ningún estilo.

Propiedades width y height

Las propiedades width y height se utilizan para definir el tamaño de un elemento. El ancho y la altura de un elemento pueden variar según el tipo de modelo de caja.

index.html

index.html

styles.css

styles.css

copy

También es importante mencionar que, para la mayoría de los elementos, suele ser suficiente definir únicamente la propiedad width, ya que la height se determina automáticamente. Esto ayuda a evitar problemas de desbordamiento cuando el width o height del contenido es menor que el contenido interno.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

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