Box Model

Box Model

Todos los elementos se pueden considerar como cajas.

Este termino se emplea para el diseño.

Box Model

Contenido

Padding

Border

Margin

Box Model

div {
    width: 320px;
    padding: 10px;
    border: 5px dashe red;
    margin: 0; 
}

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

div {
    height: 320px;
    padding: 10px;
    border: 5px dashe red;
    margin: 0; 
}

320px (height)
+ 20px (top+ bottom padding)
+ 10px (top+ bottom border)
+ 0px (top+ bottom margin)
= 350px