Padding en CSS

Ya vimos cómo funciona el margen en CSS. Ahora veremos cómo funciona el padding en CSS.

Padding (relleno)

Así como los márgenes definen los espacios que hay fuera de un elemento, padding define los espacios que están dentro de un elemento seleccionado.

Este elemento tiene padding de 50px.

 

Con CSS puedes especificar el valor padding para cada lado de un elemento:

  • padding – especifica una propiedad abreviada para establecer las propiedades del padding en una declaración.
  • padding-bottom – especifica el padding inferior de un elemento.
  • padding-top – especifica el padding superior de un elemento.
  • padding-left – especifica el padding izquierdo de un elemento.
  • padding-righ – especifica el padding derecho de un elemento.

Todas las propiedades del padding pueden tener los siguientes valores:

  • length – especifica un padding en px, pt, cm, etc.
  • % – especifica un padding en% del ancho del elemento contenedor.
  • inherit – especifica que el padding debe heredarse del elemento primario.

Veamos otro ejemplo.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Si queremos, podemos utilizar la propiedad abreviada (Shorthand Property)

La propiedad abreviada nos permite especificar todas las propiedades de los padding en una sola propiedad.

Veamos algunos ejemplos.

  • padding: 30px 60px 90px 120px; Este ejemplo funciona así:
    • padding superior – tiene 30px
    • padding derecho – tiene 60px
    • padding inferior – 90px
    • padding izquierdo – 120px
  • padding: 30px 60px 90px;
    • paddingsuperior – tiene 30px
    • padding derecho e izquierdo – tienen 60px
    • paddingizquierdo – tiene 90px
  • padding: 30px 60px;
    • paddingsuperior e inferior – tienen 30px
    • paddingderecho e izquierdo – tienen 50px
  • padding: 30px;
    • todos los padding tienen 30px

Cuando estés diseñando prueba con los márgenes y los paddings para lograr que el contenido sea de fácil lectura para el visitante de la página.

Recuerda que también puedes cambiar las propiedades de los colores, fondos, fuentes y textos entre otros.

Más información. Espera mis próximos artículos.

¿Quieres dejar tu opinión? Déjala acá abajo.

Deja un comentario