Los elementos que se renderizan, se renderizan como cajas, contenedoras de contenido y pueden llevar estilos. Los estilos que pueden modi...

Los elementos que se renderizan, se renderizan como cajas, contenedoras de contenido y pueden llevar estilos. Los estilos que pueden modificar las cajas se les llama: Modelo de Caja los estilos son:

• Margin: Espacio externo, de la caja hacia afuera. Ese es el margin.
• Border: Línea que define los elementos. Se define si aparece o no, sus estilos y elementos.
• Padding: Espacio interno, de la caja hacia adentro. Ayuda a posicionar.
• Contenido: Puede ser cualquier elemento que se renderice.
• Width: El ancho que queremos que tenga
• Height: El alto que queremos que tenga

Cuando agregamos un parámetro, este se sumará con los siguientes parámetros indicados. Es decir, Si colocamos un width de 100% y luego agregamos borde, margin o padding. A partir de ese momento se creará en la pantalla del navegador un scroll feo. Esto sucede porque al 100% que ya se le había indicado, ahora hay que sumar un margin y un padding.

Para que esto no suceda, es necesario formatear el código predeterminado del navegador y colocarlo en 0, ya sea utilizando el selector universal (“ * “) y agregando: las propiedades:

* { /*Selector Universal*/
    box-sizing: border-box  ;
    padding: 0;
    margin: 0;
}