CSS: Márgenes internos

• Propiedad abreviada

Al observar los diferentes bloques que se han creado a lo largo de todas las lecciones, se puede notar que el texto "se adhiere" a los bordes de los bloques. Por ejemplo:

Puedes decir que en las propias lecciones los ejemplos no suelen verse así, y tendrías razón. En cada ejemplo, se utilizaron márgenes internos desde los bordes del bloque para añadir más espacio.

Para crear márgenes internos se utilizan 4 reglas:

• padding-top - margen interno superior
• padding-right - margen interno derecho
• padding-bottom - margen interno inferior
• padding-left - margen interno izquierdo

Cada propiedad toma un valor numérico y una unidad de medida, por ejemplo píxeles

<div class="card">Tarjeta con texto blanco sobre fondo violeta</div>

.card {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;

  color: #ffffff;
  background-color: #673ab7;
}

Propiedad abreviada

Si se necesita establecer márgenes en todos los lados, se utiliza no 4 propiedades diferentes, sino una sola: padding. Esta propiedad es una abreviatura de las propiedades ya conocidas y permite establecer:

• margen superior
• margen derecho
• margen inferior
• margen izquierdo

El orden de especificación es importante y coincide con el mencionado anteriormente. Si se reescribe el ejemplo anterior, se verá así:

.card {
  padding: 10px 0 10px 20px;

  color: #ffffff;
  background-color: #673ab7;
}

Además de esta forma de escritura, existen formas abreviadas para mayor comodidad:

• Si se especifica solo un valor, se utilizará para todos los lados al mismo tiempo
• Si se especifican dos valores, el primero se utilizará para los márgenes verticales (superior e inferior) y el segundo para los márgenes horizontales (derecho e izquierdo)
• Si se especifican tres valores, se utilizarán para el margen superior, los márgenes horizontales y el margen inferior

Tarea

Agrega un párrafo con la clase padding al editor y establece márgenes internos:

• 10 píxeles en la parte superior
• 15 píxeles en la parte inferior
• 20 píxeles en los lados izquierdo y derecho

Utiliza el siguiente texto para el párrafo:

El texto en sí no importa y no se verifica. El objetivo principal es agregar texto que se mostrará en varias líneas. Esto ayudará a ver correctamente los márgenes izquierdo y derecho.

Agrega un fondo negro al párrafo y un color de texto blanco. Prueba diferentes valores para la propiedad padding para ver cómo afecta al bloque.

Escribe los estilos dentro de la etiqueta <style>.