Teoría
Teoría

Cambiar el tipo de caja: display

El tipo de caja de un elemento no es algo fijo e inmutable: se puede cambiar con CSS. La propiedad encargada de hacerlo es display.

Por ejemplo, permite convertir las cajas de párrafos y títulos en cajas en línea, y las de span y strong en cajas de bloque.

La propiedad display tiene muchos valores. Ya conoces indirectamente dos de ellos: display: block corresponde a una caja de bloque y display: inline, a una caja en línea.

En esta tercera sección conoceremos algunos valores más avanzados de display.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Cambiar el tipo de caja: display</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> De forma predeterminada, un párrafo genera una caja de bloque. En cambio, la etiqueta genera una caja en línea. Pero puedes cambiar este comportamiento con CSS. Y puedes hacerlo con cualquier elemento. </body> </html>

CSS

body { padding: 20px; } p { margin: 20px 0; } strong { }

ObjetivosRealizado

Cambia el comportamiento habitual de las cajas de estas etiquetas:

Asigna la propiedad display: inline; a los elementos .
Asigna display: block; a los elementos .