CSS (Cascading Style Sheets) utiliza un modelo de cajas o "box model" para diseñar y organizar los elementos HTML en una página web. Este modelo de cajas es fundamental para la disposición y estilo de los elementos.
Content (Contenido): Es el área donde se muestra el contenido real del elemento, como texto, imágenes o cualquier otro contenido multimedia.
Padding (Relleno): Es el espacio que se encuentra entre el contenido y el borde. Puede ser utilizado para dar más espacio al contenido dentro del borde.
Border (Borde): Es la línea que encierra el contenido y el padding. Puede tener diferentes estilos (sólido, punteado, doble, etc.) y colores.
Margin (Margen): Es el espacio exterior al borde. Ayuda a separar un elemento de otros elementos a su alrededor.
<<CSS>>
.div-ejemplo {
width: 300px; /* Ancho del contenido */
height: 200px; /* Alto del contenido */
padding: 20px; /* Espacio de relleno */
border: 5px solid black; /* Borde sólido negro de 5px */
margin: 30px; /* Margen exterior */
background-color: lightgrey; /* Color de fondo del contenido */
}
<<HTML>>
<div class="div-ejemplo">
Este es un ejemplo del modelo de cajas en CSS.
</div>
Tamaño de cajas