PREENCHIMENTO CSS
Propriedade padding são
usadas para gerar espaço ao redor do conteúdo de um elemento.
Propriedades para
especificar preenchimento de cada lado de um elemento.
Ø padding-top
Ø padding-right
Ø padding-bottom
Ø padding-left
preenchimento
tem seguintes valores:
comprimento - px, pt, cm, etc.
% especifica preenchimento da
largura do elmento.
Herdar – herda preenchimento do
elemento pai.
Na prática:
<!DOCTYPE
html>
<html>
<head>
<style>
div {
border:3px solid blue;
background-color: yellow;
padding-top: 40px;
padding-right:25px;
padding-bottom: 20px;
padding-left: 30px;
}
</style>
</head>
<body>
<h2>Usando
propriedades de preenchimento individuais</h2>
<div>Este
elemento div tem um preenchimento superior de 40px, um preenchimento direito de
25px, um preenchimento inferior de 20px e um preenchimento esquerdo de
30px.</div>
</body>
</html>
Preenchimento -
propriedade abreviada
Propriedades para
especificar preenchimento de cada lado de um elemento.
Ø padding-top
Ø padding-right
Ø padding-bottom
Ø padding-left
Propriedade padding
com quatro valores:
Preenchimento: 40px 25px 20px 30px
Superior 40px
Direita 25px
Inferior 20px
Esquerda 30px
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:
3px solid blue;
padding: 40px 25px 20px 30px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade abreviada de
preenchimento - 4 valores</h2>
<div>Este elemento div tem um
preenchimento superior de 40px, um preenchimento direito de 25px, um
preenchimento inferior de 20px e um preenchimento esquerdo de 30px.</div>
</body>
</html>
Propriedade padding
com três valores:
Preenchimento: 40px 25px 20px
Superior 40px
Direita 25px
Inferior 20px
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:
3px solid blue;
padding: 40px 25px 20px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade abreviada de
preenchimento - 3 valores</h2>
<div>Este elemento div tem um
preenchimento superior de 40px, um preenchimento direito de 25px, um
preenchimento inferior de 20px. </div>
</body>
</html>
Propriedade padding
com dois valores:
Preenchimento: 40px 25px
Superior 40px
Direita 25px
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:
3px solid blue;
padding: 40px 25px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade abreviada de
preenchimento - 2 valores</h2>
<div>Este elemento div tem um
preenchimento superior de 40px, um preenchimento direito de 25px. </div>
</body>
</html>
Propriedade padding
com um valor:
Preenchimento: 40px
Superior 40px
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:
3px solid blue;
padding: 40px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>A propriedade abreviada de
preenchimento - 1 valores</h2>
<div>Este elemento div tem um
preenchimento superior de 40px. </div>
</body>
</html>
Preenchimento e
largura do elemento
A
propriedade CSS width especifica a largura da
área de conteúdo do elemento.
<div> tem uma largura 250px. Mas largura
real do elemento <div> será 250px + 30px da esquerda +30px da direita=
310px
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div.exem1 {
width:
250px;
background-color: yellow;
}
div.exem2 {
width:
250px;
padding:
30px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Preenchimento e largura do
elemento</h2>
<div class="exem1">Este div tem
250px de largura.</div>
<br>
<div class="exem2">A largura
deste div é 310px, embora seja definido como 250px no CSS.</div>
</body>
</html>
Para manter a largura em 250px, independentemente
da quantidade de preenchimento, você pode usar a box-sizing propriedade
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div.exem1 {
width: 250px;
background-color:
yellow;
}
div.exem2 {
width: 250px;
padding: 30px;
box-sizing:
border-box;
background-color:
lightblue;
}
</style>
</head>
<body>
<h2>Preenchimento e largura do elemento - com
dimensionamento de caixa</h2>
<div class="exem1">Este div tem 250px de largura.
</div>
<br>
<div class="exem2">A largura deste div
permanece em 250px, apesar dos 60px de preenchimento total à esquerda e à
direita, por causa da propriedade box-sizing: border-box.
</div>
</body>
</html>