Padding em CSS
Use a propriedade CSS padding (top, bottom, left, right) para definir o padding de cada lado de um elemento HTML. Veja os exemplos.
A propriedade CSS padding é utilizada para criar espaço à volta do conteúdo de um elemento. O CSS oferece diferentes propriedades com as quais pode definir o padding de cada lado de um elemento (direito, esquerdo, superior e inferior).
Os lados individuais
Com a ajuda das seguintes propriedades, pode definir o padding de cada lado de um elemento:
Como pode imaginar, para o lado superior utilizamos padding-top, para o inferior padding-bottom, para o lado esquerdo padding-left e para o direito padding-right.
Todas as propriedades de padding podem ter os valores abaixo:
- length, que é utilizado para especificar um padding em px, pt, cm, etc.,
- %, que especifica um padding em % da largura do elemento contentor,
- inherit, que especifica que o padding deve ser herdado do seu elemento pai.
Tenha em conta que a propriedade CSS padding não pode aceitar valores negativos. O seu valor predefinido para todas as propriedades de padding é 0.
Exemplo das propriedades de padding individuais:
Exemplo de utilização das propriedades de padding individuais:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: yellow;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
</div>
</body>
</html>O padding como propriedade abreviada
A propriedade CSS padding é uma propriedade abreviada (shorthand) para as seguintes propriedades de padding individuais:
Nos casos em que a propriedade padding tem apenas 1 valor, por exemplo padding: 35px, os quatro paddings são todos de 35px.
Exemplo da propriedade abreviada padding com um valor:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: green;
padding: 35px;
}
</style>
</head>
<body>
<h2>Individual padding properties</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>A propriedade padding pode ter 2 valores, por exemplo padding: 20px 40px, onde os paddings superior e inferior são de 20px e os paddings direito e esquerdo são de 40px.
Exemplo de padding CSS com 2 números
p {
padding: 20px 40px;
}Equivale ao código acima.
Exemplo de padding CSS com 2 números, forma extensa, código
p {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 20px;
padding-left: 40px;
}Exemplo da propriedade abreviada padding com dois valores:
Exemplo de código CSS padding
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
padding: 20px 40px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Resultado
A propriedade padding pode ter 3 valores, por exemplo, padding: 20px 15px 35px;, onde o padding superior é de 20px, os paddings direito e esquerdo são de 15px e o padding inferior é de 35px.
Exemplo de padding CSS com 3 números, código
p {
padding: 20px 15px 35px;
}Equivale ao código acima.
Exemplo de padding CSS com 3 números, forma extensa, código
p {
padding-top: 20px;
padding-right: 15px;
padding-bottom: 35px;
padding-left: 15px;
}Exemplo da propriedade abreviada padding com três valores:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
padding: 20px 15px 35px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>E, por fim, a propriedade padding pode ter quatro valores, por exemplo padding: 25px 50px 75px 100px;, onde o padding superior é de 25px, o direito de 50px, o inferior de 75px e o esquerdo de 100px.
Exemplo do mesmo padding CSS
p {
padding: 25px 50px 75px 100px;
}Exemplo da propriedade abreviada padding com quatro valores:
Exemplo da propriedade abreviada padding com dois valores:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #95e5f7;
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>Example of the padding shorthand property</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>