Rejilla interna de CSS

El margen interno de este elemento es de 70px.

Rejilla interna de CSS

CSS padding El atributo se utiliza para generar espacio alrededor del contenido del elemento en cualquier borde definido.

A través de CSS, puede controlar completamente el margen interno (relleno). Algunos atributos pueden establecer el margen interno para cada lado (arriba, derecha, abajo e izquierda) del elemento.

Padding - Lado individual

CSS tiene atributos para especificar el margen interno de cada lado del elemento:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Todos los atributos de márgen interno pueden establecer los siguientes valores:

  • longitud - Especificar el margen interno en unidades como px, pt, cm, etc.
  • % - Especificar el margen interno en porcentaje de la anchura del elemento contenedor
  • inherit - Especificar que el margen interno debe ser heredado del elemento padre

Consejo:No se permiten valores negativos.

Ejemplo

Establecer diferentes márgenes internos para todos los cuatro lados del elemento <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Intente hacerlo usted mismo

Padding - Atributo abreviado

Para reducir el código, puede especificar todos los atributos de márgen interno en una propiedad.

padding El atributo es una abreviatura de los siguientes atributos de márgenes internos:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

El mecanismo de funcionamiento es el siguiente:

Si padding El atributo tiene cuatro valores:

  • padding: 25px 50px 75px 100px;
    • El margen superior es de 25px
    • El margen derecho es de 50px
    • El margen inferior es de 75px
    • El margen izquierdo es de 100px

Ejemplo

Usar el atributo abreviado de padding con cuatro valores asignados:

div {
  padding: 25px 50px 75px 100px;
}

Intente hacerlo usted mismo

Si padding El atributo se asignaron tres valores:

  • padding: 25px 50px 75px;
    • El margen superior es de 25px
    • El margen derecho e izquierdo son de 50px
    • El margen inferior es de 75px

Ejemplo

Usar el atributo abreviado de padding con tres valores asignados:

div {
  padding: 25px 50px 75px;
}

Intente hacerlo usted mismo

Si padding El atributo se asignaron dos valores:

  • padding: 25px 50px;
    • El margen superior e inferior son de 25px
    • El margen derecho e izquierdo son de 50px

Ejemplo

Usar el atributo abreviado de padding con dos valores asignados:

div {
  padding: 25px 50px;
}

Intente hacerlo usted mismo

Si padding El atributo se asignó un valor:

  • padding: 25px;
    • Todos los cuatro márgenes internos son de 25px

Ejemplo

Usar el atributo abreviado de padding con un valor asignado:

div {
  padding: 25px;
}

Intente hacerlo usted mismo

Márgenes internos y anchura del elemento

CSS width El atributo especifica el ancho de la región del contenido del elemento. La región del contenido es la parte interna del elemento (.modelo de caja) que contiene los márgenes internos, los bordes y los márgenes.

Por lo tanto, si el elemento tiene un ancho especificado, el margen interno agregado se añadirá al ancho total del elemento. Esto suele ser un resultado no deseado.

Ejemplo

Aquí, el ancho del elemento <div> es de 300px. Sin embargo, el ancho real del elemento <div> será de 350px (300px + margen izquierdo 25px + margen derecho 25px):

div {
  width: 300px;
  padding: 25px;
}

Intente hacerlo usted mismo

Para mantener el ancho en 300px, independientemente de la cantidad de relleno, puede usar: box-sizing Atributo. Esto causará que el elemento mantenga su anchura. Si se agrega un margen interno, el espacio disponible para el contenido se reducirá.

Ejemplo

Usar la propiedad box-sizing para mantener el ancho en 300px, independientemente de la cantidad de relleno:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Intente hacerlo usted mismo

Más ejemplos

Establecer el margen izquierdo
Este ejemplo muestra cómo establecer el margen izquierdo interno del elemento <p>.
Establecer el margen derecho
Este ejemplo muestra cómo establecer el margen derecho interno del elemento <p>.
Establecer el margen superior
Este ejemplo muestra cómo establecer el margen superior interno del elemento <p>.
Establecer el margen inferior
Este ejemplo muestra cómo establecer el margen inferior interno del elemento <p>.

Todas las propiedades de márgenes internos de CSS

Atributo Descripción
padding Atributo abreviado para establecer todas las propiedades de márgenes internos en una declaración.
padding-bottom Establecer el margen inferior interno del elemento.
padding-left Establecer el margen izquierdo interno del elemento.
padding-right Establecer el margen derecho interno del elemento.
padding-top Establecer el margen superior interno del elemento.

Lectura adicional

Libro extraescolar:Modelo de cuadro: Margen interno CSS