CSS - Paddings
A propriedade padding permite que você especifique quanto espaço deve aparecer entre o conteúdo de um elemento e sua borda -
O valor deste atributo deve ser um comprimento, uma porcentagem ou a palavra herdar . Se o valor for herdado , ele terá o mesmo preenchimento de seu elemento pai. Se uma porcentagem for usada, a porcentagem pertence à caixa que a contém.
As seguintes propriedades CSS podem ser usadas para controlar listas. Você também pode definir valores diferentes para o preenchimento em cada lado da caixa usando as seguintes propriedades -
o padding-bottom especifica o preenchimento inferior de um elemento.
o padding-top especifica o preenchimento superior de um elemento.
o padding-left especifica o preenchimento esquerdo de um elemento.
o padding-right especifica o preenchimento correto de um elemento.
o padding serve como uma abreviatura para as propriedades anteriores.
Agora, veremos como usar essas propriedades com exemplos.
A propriedade padding-bottom
A propriedade padding-bottom define o padding inferior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade padding-top
A propriedade padding-top define o preenchimento superior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade padding-left
A propriedade padding-left define o padding esquerdo (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade padding-right
A propriedade padding-right define o preenchimento correto (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Isso produzirá o seguinte resultado -
A Propriedade Padding
A propriedade padding define o preenchimento esquerdo, direito, superior e inferior (espaço) de um elemento. Isso pode assumir um valor em termos de comprimento de%.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Isso produzirá o seguinte resultado -