BOX MODEL

¿Box Model?

Imagina que tus elementos HTML (no importa cuales) son cajas, veamos de que se trata.

Area de Contenido

Todo elemento tiene contenido, no importa si es texto o una imagen. Se encuentra dentro de una caja que es del tamaño exacto de ese contenido, es decir que no hay espacio en blanco entre él y los bordes de la caja:

Padding

Te puedes imaginar al padding como espacio vacío alrededor del contenido, el padding es opcional y es usado para crear espacio en blanco:

Border

Los elementos pueden tener un borde, el borde siempre se encontrará alrededor del padding.

El CSS te permite darle ancho, color y estilo a los bordes.

Margin

El margen es también opcional y rodea al borde, se usa para separar a los elementos visualmente.

Margin y Padding

Puede ser un poquito dificil entender la diferencia entre padding y margin, El margen da espacio entre elementos diferentes mientras que el padding te da espacio extra alrededor del contenido (esto se entiende mucho mejos cuando el elemento tiene un borde).

Piensa en el padding como parte del elemento mientras que el margen rodea al elemento y lo separa del resto.

Aquí hay algunos ejemplos de los que se puede hacer con padding, border y margin

¿Que se puede hacer con el box model?

Guardaremos los estilos de css en una pagina html aparte para después vincularlo ya que los estilos css son para modificar físicamente el diseño.