Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (VIII)



10.7. Padding

El atributo padding define el espacio transparente entre el contenido y el borde. Es el margen interior de la caja, el margen que queda dentro de la caja. Puede tener valores numéricos enteros positivos. El valor cero indica que no existe padding. El padding se compone de cuatro valores, uno para cada lado. Igual que con el margin, el padding se puede indicar de forma compacta o de forma explícita.

Padding de forma explícita: Padding superior con padding-top; Padding derecho con padding-right; Padding inferior con padding-bottom; Padding izquierdo con padding-left.

Padding de forma compacta, en este caso hay cuatro variantes:

a) Con un sólo número. Se aplica el valor a las cuatro posiciones del padding. Por ejemplo padding:15px, es lo mismo que padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px. También hemos dado un margin: 10px.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

b) Con dos números. Se aplica el primer valor al padding superior e inferior; y el segundo valor al padding derecho e izquierdo. Por ejemplo padding: 15px 25px, es lo mismo que padding-top: 15px; padding-right: 25px; padding-bottom: 15px; padding-left: 25px.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

 

c) Con cuatro números. Se aplica el primer valor al padding superior, el segundo al derecho, el tercero al inferior y el cuarto al izquierdo. Por ejemplo padding:5px 15px 25px 35px, es lo mismo que padding-top: 5px; padding-right: 15px; padding-bottom: 25px; padding-left: 35px.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

 

c) Con tres números. Se aplica el primer valor al padding superior, el segundo al derecho e izquierdo y el tercero al inferior. Por ejemplo padding:5px 15px 25px, es lo mismo que padding-top: 5px; padding-right: 15px; padding-left: 15px; padding-bottom: 25px.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem.

 

El valor del padding se puede indicar con una unidad absoluta (px, mm, ..) o con una unidad relativa (%, em, ...). También se puede heredar del elemento contenedor con el valor inherit.

Padding adyacentes. Al contrario que sucedía con los márgenes, con el padding no hay interacción con las cajas adyacentes ya que el padding está confinado dentro del borde de su caja, además no puede tomar valores negativos.


Enero-2019 (V 2.01)
Pág. 10.8
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.