Los elementos HTML se representan como cajas rectangulares en una página web. Cada elemento tiene su área de contenido, relleno, borde y margen.

• El área de contenido es el espacio donde reside el contenido real del elemento. Su anchura depende del tipo de elemento (nivel de bloque o en línea - veremos la diferencia entre ellos y su especificidad para trabajar más adelante en el curso). Su altura depende del propio contenido.
• El padding es el área entre el contenido y el borde, que puede utilizarse para añadir espacio entre el contenido y el borde.
• El borde rodea el elemento. Por defecto, el ancho del borde es 0. Además, si no especificamos el color del borde, éste toma el color del contenido.
• El margen es el espacio entre el borde y otros elementos de la página.

Nota

Por defecto, algunos elementos tienen propiedades predeterminadas de padding y margin. Esto se hizo para asegurar que una página web sea legible incluso sin estilos.

propiedades width y height

Las propiedades width y height se utilizan para definir el tamaño de un elemento. La anchura y la altura de un elemento pueden variar dependiendo del tipo de modelo de caja.

También es importante mencionar que para la mayoría de los elementos, tener sólo la propiedad width es a menudo suficiente, ya que la height se determinará automáticamente. Esto ayuda a evitar problemas de desbordamiento cuando el width o el height del contenido es menor que el contenido interior.