Seleccioné un párrafo de mi página y le apliqué distintas propiedades del modelo de caja. El código quedó así:
HTML
Este es un párrafo de prueba para aplicar el modelo de caja.
CSS
.caja {
margin: 20px; /* espacio externo, separa el párrafo de otros elementos /
border: 2px solid #333; / línea que rodea el párrafo /
padding: 15px; / espacio interno, separa el texto del borde /
background-color: #f0f0f0; / color de fondo para visualizar mejor la caja */
}
Reflexión:
El margin movió el párrafo respecto a otros elementos.
El border agregó un contorno visible.
El padding generó espacio entre el texto y el borde.
El background-color me ayudó a entender claramente cómo crece la caja cuando ajusto los valores.
De esta manera comprobé en la práctica cómo cada propiedad del modelo de caja afecta la posición y apariencia de un elemento.
Quedo atento a sus comentarios ;)
