Como usar el padding en CSS

El padding y el margin son dos propiedades pertenecientes al CSS utilizadas para separar dos elementos. Por ejemplo: un bloque de texto de su contenedor, una imagen de una contigua, un bloque de una página del header o del footer. Dependiendo de cada ocasión debemos elegir entre espaciar con margin o espaciar con padding, he aquí unos pequeños consejos que no por su simplicidad dejan de ser extramadamente útiles.

He aquí una imagen que me servirá para explicarles la diferencia entre una propiedad y la otra. En este post me centraré en explicarles el correcto uso del padding.

El padding es un espaciado que se mide o se establece por dentro de la div, es decir, adoptará las propiedades de fondo (background) y bordes (border) aplicados.

En una div podemos diferenciar cuatro zonas de padding:

Formas de expresar el padding correctamente:
1)

\valor\ = Valor del espaciado a utilizar
\unidad\ = Unidad en que expresaremos el espaciado (px, %, em)

Ejemplo:

2)

Con esta sintaxis debemos ser más cuidadosos ya que el orden que presentan los valores es inalterable, siempre va primero el padding-top, luego el padding-right, luego el padding-bottom y por último el padding-left.

Ejemplo: Si se nos presenta esta situación por ejemplo, sería lo mismo escribir los valores de este modo:

a escribirlos con la siguiente sintaxis:

3)

Cuando se cumplen las mismas medidas en padding-top y padding-bottom se puede simplificar en un solo valor. Igualmente ocurre cuando los valores de padding-right y padding-left coinciden. Hay que tener en cuenta en esta ocasión que el padding correspondiente a padding-top y padding-bottom se coloca primero y el que corresponde al padding de los costados (padding-right y padding-left) se coloca en segundo lugar. Para aclarar veamos algunos ejemplos:

Ejemplo: Si los valores que tengo son estos:

Puede simplificarse en:

4)Cuando todos los espaciados compartirán el mismo valor podemos simplificar aún más y colocarlos juntos

Ejemplo: Estos valores

pueden expresarse de la siguiente manera:

Scroll to top