Relleno CSS

Tabla de contenido

    Mostrar tabla de contenidos

El relleno se utiliza para crear espacio alrededor del contenido de un elemento, dentro de los bordes definidos.

This element has a padding of 70px.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

Relleno CSS

Las propiedades CSS padding se utilizan para generar espacio alrededor el contenido de un elemento, dentro de cualquier borde definido.

Con CSS, tienes control total sobre el relleno. hay propiedades para configurar el relleno para cada lado de un elemento (superior, derecho, inferior e izquierdo).

Acolchado - Lados individuales

CSS tiene propiedades para especificar el relleno para cada lado de un elemento:

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

Todas las propiedades de relleno pueden tener los siguientes valores:

  • longitud: especifica un relleno en px, pt, cm, etc.

  • %: especifica un relleno en % del ancho del elemento contenedor

  • heredar: especifica que el relleno debe heredarse del elemento principal

Nota: No se permiten valores negativos.

Ejemplo

Establezca un relleno diferente para los cuatro lados de un elemento <div>:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>

Relleno: propiedad abreviada

Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad.

La propiedad padding es una propiedad abreviada para el siguiente individuo propiedades de relleno:

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

Pues así es como funciona:

Si la propiedad padding tiene cuatro valores:

padding: 25px 50px 75px 100px;

  • el relleno superior es de 25px

  • el relleno derecho es 50px

  • el relleno inferior es de 75px

  • el relleno izquierdo es 100px

Ejemplo

Utilice la propiedad abreviada de relleno con cuatro valores:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>

</body>
</html>

Si la propiedad padding tiene tres valores:

padding: 25px 50px 75px;

  • el relleno superior es de 25px

  • los rellenos derecho e izquierdo son 50px

  • el relleno inferior es de 75px

Ejemplo

Utilice la propiedad abreviada de relleno con tres valores:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 3 values</h2>

<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>

</body>
</html>

Si la propiedad padding tiene dos valores:

padding: 25px 50px;

  • los rellenos superior e inferior son de 25 px

  • los rellenos derecho e izquierdo son 50px

Ejemplo

Utilice la propiedad abreviada de relleno con dos valores:

 div {	  padding: 25px 50px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 2 values</h2>

<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>

</body>
</html>

Si la propiedad padding tiene un valor:

padding: 25px;

  • los cuatro rellenos son de 25px

Ejemplo

Utilice la propiedad abreviada de relleno con un valor:

 div {	  padding: 25px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right padding of 25px.</div>

</body>
</html>

Relleno y ancho del elemento

La propiedad CSS width especifica el ancho del área de contenido del elemento. El El área de contenido es la parte dentro del relleno, borde y margen de un elemento. (el modelo de caja).

Entonces, si un elemento tiene un ancho específico, el relleno agregado a ese elemento se sumará al ancho total del elemento. Este es a menudo un resultado indeseable.

Ejemplo

Aquí, al elemento <div> se le asigna un ancho de 300px. Sin embargo, el ancho real del elemento <div> será 350px (300px + 25 px de relleno izquierdo + 25 px de relleno derecho):

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

Para mantener el ancho en 300 px, sin importar la cantidad de relleno, puedes usar propiedad tamaño de caja. Esto hace que el elemento mantenga su ancho real; si Si aumenta el relleno, el espacio de contenido disponible disminuirá.

Ejemplo

Utilice la propiedad box-sizing para mantener el ancho en 300 px, sin importar el cantidad de relleno:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width - with box-sizing</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>

Más ejemplos

Establecer el relleno izquierdo

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-left: 2cm;
}
p.padding2 {
  padding-left: 50%;
}
</style>
</head>
<body>

<h1>The padding-left Property</h1>

<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

</body>
</html>

Este ejemplo demuestra cómo configurar el relleno izquierdo de un elemento <p>.

Establecer el relleno correcto

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-right: 2cm;
}

p.padding2 {
  padding-right: 50%;
}
</style>
</head>
<body>

<h1>The padding-right Property</h1>

<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>

</body>
</html>

Este ejemplo demuestra cómo configurar el relleno correcto de un elemento <p>.

Establecer el relleno superior

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-top: 2cm;
}

p.padding2 {
  padding-top: 50%;
}
</style>
</head>
<body>

<h1>The padding-top Property</h1>

<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>

</body>
</html>

Este ejemplo demuestra cómo configurar el relleno superior de un elemento <p>.

Establecer el relleno inferior

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-bottom:2cm;
}

p.padding2 {
  padding-bottom:50%;
}
</style>
</head>
<body>

<h1>The padding-bottom Property</h1>

<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>

Este ejemplo demuestra cómo configurar el relleno inferior de un elemento <p>.

Todas las propiedades de relleno CSS

padding

Una propiedad abreviada para establecer todas las propiedades de relleno en una declaración

padding-bottom

Establece el relleno inferior de un elemento.

padding-left

Establece el relleno izquierdo de un elemento.

padding-right

Establece el relleno correcto de un elemento.

padding-top

Establece el relleno superior de un elemento.