Teoría
Teoría

El modelo de cajas y las cajas en línea

Repasemos las particularidades de las cajas en línea dentro del modelo de cajas:

No responden a las propiedades CSS width y height.
Responden parcialmente a margin: solo se aplican los márgenes horizontales.
Responden parcialmente a padding: solo el relleno horizontal afecta al espacio que ocupan.
El padding vertical aumenta su tamaño visual, pero no el espacio que ocupan: no empuja a los demás elementos.
Admiten bordes. Al igual que ocurre con padding, los bordes superior e inferior no aumentan el espacio que ocupa el elemento.

Al terminar el ejercicio, observa que la separación entre las líneas de los párrafos no aumentó, aunque los elementos se ven más altos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>El modelo de cajas y las cajas en línea</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> Los elementos con cajas en línea solo responden a una parte de las propiedades del modelo de cajas. No responden al ancho ni al alto, pero sí responden parcialmente al relleno y los márgenes, y admiten bordes sin problemas. Los bordes, el relleno y los márgenes horizontales aumentan el tamaño de los elementos con cajas en línea. Los bordes y el relleno verticales aumentan su tamaño visual, pero no el espacio que ocupan. </body> </html>

CSS

body { padding: 0 20px; } p { padding: 5px; } em { border-width: 0; border-style: solid; border-color: #6a6a6a; }

ObjetivosRealizado

Asigna estas propiedades a los elementos em:

padding: 10px;.
margin: 10px;.
border-width: 2px;.