Preenchimento CSS

Índice

    Mostrar índice

O preenchimento é usado para criar espaço ao redor do conteúdo de um elemento, dentro de quaisquer bordas definidas.

This element has a padding of 70px.

Experimente você mesmo →

<!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>

Preenchimento CSS

As propriedades CSS padding são usadas para gerar espaço ao redor o conteúdo de um elemento, dentro de quaisquer bordas definidas.

Com CSS, você tem controle total sobre o preenchimento. Existem propriedades para definir o preenchimento para cada lado de um elemento (superior, direito, inferior e esquerdo).

Preenchimento - Lados Individuais

CSS possui propriedades para especificar o preenchimento para cada lado de um elemento:

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

Todas as propriedades de preenchimento podem ter os seguintes valores:

  • comprimento - especifica um preenchimento em px, pt, cm, etc.

  • % - especifica um preenchimento em% da largura do elemento que o contém

  • herdar - especifica que o preenchimento deve ser herdado do elemento pai

Nota: Valores negativos não são permitidos.

Exemplo

Defina um preenchimento diferente para todos os quatro lados de um elemento <div>:

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

Experimente você mesmo →

<!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>

Preenchimento - propriedade abreviada

Para encurtar o código, é possível especificar todas as propriedades de preenchimento em uma propriedade.

A propriedade padding é uma propriedade abreviada para o seguinte indivíduo propriedades de preenchimento:

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

Então, aqui está como funciona:

Se a propriedade padding tiver quatro valores:

padding: 25px 50px 75px 100px;

  • o preenchimento superior é 25px

  • o preenchimento direito é 50px

  • o preenchimento inferior é 75px

  • o preenchimento esquerdo é 100px

Exemplo

Use a propriedade abreviada de preenchimento com quatro valores:

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

Experimente você mesmo →

<!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>

Se a propriedade padding tiver três valores:

padding: 25px 50px 75px;

  • o preenchimento superior é 25px

  • os preenchimentos direito e esquerdo são 50px

  • o preenchimento inferior é 75px

Exemplo

Use a propriedade abreviada de preenchimento com três valores:

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

Experimente você mesmo →

<!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>

Se a propriedade padding tiver dois valores:

padding: 25px 50px;

  • os preenchimentos superior e inferior têm 25px

  • os preenchimentos direito e esquerdo são 50px

Exemplo

Use a propriedade abreviada de preenchimento com dois valores:

 div {	  padding: 25px 50px;
}

Experimente você mesmo →

<!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>

Se a propriedade padding tiver um valor:

padding: 25px;

  • todos os quatro preenchimentos têm 25px

Exemplo

Use a propriedade abreviada de preenchimento com um valor:

 div {	  padding: 25px;
}

Experimente você mesmo →

<!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>

Preenchimento e largura do elemento

A propriedade CSS width especifica a largura da área de conteúdo do elemento. O área de conteúdo é a parte dentro do preenchimento, borda e margem de um elemento (o modelo de caixa).

Portanto, se um elemento tiver uma largura especificada, o preenchimento adicionado a esse elemento será ser adicionado à largura total do elemento. Muitas vezes este é um resultado indesejável.

Exemplo

Aqui, o elemento <div> recebe uma largura de 300px. No entanto, a largura real do elemento <div> será 350px (300px + 25px de preenchimento esquerdo + 25px de preenchimento direito):

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

Experimente você mesmo →

<!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 manter a largura em 300px, não importa a quantidade de preenchimento, você pode usar o propriedade box-sizing. Isto faz com que o elemento mantenha sua largura real; se você aumenta o preenchimento, o espaço de conteúdo disponível diminuirá.

Exemplo

Use a propriedade box-sizing para manter a largura em 300px, independentemente do quantidade de preenchimento:

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

Experimente você mesmo →

<!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>

Mais exemplos

Defina o preenchimento esquerdo

<!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 exemplo demonstra como definir o preenchimento esquerdo de um elemento <p>.

Defina o preenchimento correto

<!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 exemplo demonstra como definir o preenchimento direito de um elemento <p>.

Defina o preenchimento 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 exemplo demonstra como definir o preenchimento superior de um elemento <p>.

Defina o preenchimento 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 exemplo demonstra como definir o preenchimento inferior de um elemento <p>.

Todas as propriedades de preenchimento CSS

padding

Uma propriedade abreviada para definir todas as propriedades de preenchimento em uma declaração

padding-bottom

Define o preenchimento inferior de um elemento

padding-left

Define o preenchimento esquerdo de um elemento

padding-right

Define o preenchimento correto de um elemento

padding-top

Define o preenchimento superior de um elemento