padding

La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.

La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Sintaxis formal: [ <length> | <percentage> ]{1,4}

Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:

<length>

Especifica un ancho fijo no negativo. Ver más detalles <length> .

<percentage>

Con respecto a la anchura("width") del bloque que lo contiene.

• Uno: un valor unico se aplica a los 4 lados.
• Dos: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha e izquierda.
• Tres: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el tercer valor se aplica a abajo del elemento.
• Cuatro: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda. 

 padding: 5%;               /* aplica 5% de padding en todos los lados*/

 padding: 10px;              /* aplica 10px de padding en todos los lados */

 padding: 10px 20px;         /*  arriba y abajo, 10px de padding */
                             /* izquierda y derecha, 20px de padding */

 padding: 10px 3% 20px;      /*  arriba, 10px de padding          */
                             /*  izquierda y derecha, 3% de padding */
                             /*  bottom, 20px padding       */

 padding: 1em 3px 30px 5px;  /*  arriba    1em  padding  */
                             /*  derecha  3px  padding  */
                             /*  abajo 30px padding  */
                             /*  izquierda   5px  padding
                 /* en dirección de las agujas del reloj */

border:outset; padding:5% 1em;

<h4>¡Hola Mundo!</h4>
<h3>El padding es diferente en esta linea.</h3>

h4{
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}

Live Sample Link

• CSS Box Model