Neste tutorial, exploraremos cinco propriedades fundamentais do CSS que ajudam a controlar o layout e o espaçamento dos elementos em uma página web. Vamos abordar a teoria, exemplos práticos e referências confiáveis do W3Schools e MDN Web Docs.
Conteudo
1. A Propriedade box-sizing
Definição
A propriedade box-sizing é usada para alterar o comportamento padrão do modelo de caixa (box model) no cálculo das larguras (width) e alturas (height) dos elementos.
Por padrão, o modelo de caixa considera apenas o conteúdo de um elemento para calcular suas dimensões. Quando box-sizing é configurado como border-box, as dimensões incluem o padding e as bordas, o que facilita o controle e evita cálculos adicionais de espaçamento.
Vantagens do box-sizing: border-box
- Evita que o tamanho total de um elemento exceda o esperado ao adicionar
paddingouborder. - Facilita o design responsivo ao trabalhar com layouts fluidos.
Sintaxe
box-sizing: content-box | border-box;content-box(valor padrão): Owidtheheightincluem apenas o conteúdo do elemento, excluindo padding e borda.border-box: O width e height incluem o conteúdo, padding e bordas.
Exemplo Prático
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Box-Sizing</title>
<style>
.content-box, .border-box {
display: inline-block;
text-align: center;
}
.content-box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 10px solid black;
background-color: lightblue;
}
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid black;
background-color: lightgreen;
}
</style>
</head>
<body>
<h4>Box Sizing</h4>
<div class="content-box">Content-Box</div>
<div class="border-box">Border-Box</div>
</body>
</html>Resultado do exemplo acima – Box Sizing
No exemplo acima, observe que o tamanho final de content-box é maior do que o declarado no CSS devido ao acréscimo do padding e da border. Já no border-box, o tamanho final permanece conforme declarado.
Referências
2. A Propriedade margin
Definição
A propriedade margin define a área de espaçamento externa de um elemento, ou seja, o espaço entre o elemento e os outros ao seu redor.
Você pode usar a abreviação margin para definir todas as margens simultaneamente ou controlar cada lado individualmente com:
margin-top(margem superior)margin-right(margem direita)margin-bottom(margem inferior)margin-left(margem esquerda)
Formas de Implementação
- Abreviada: Define as margens de todos os lados de uma só vez.
margin: 10px 15px 20px 25px; /* top, right, bottom, left */ - Individual: Define margens específicas para cada lado.
margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px; - Automática: Usada frequentemente para centralizar elementos horizontalmente.
margin: auto;
Colapso de Margens
Uma característica importante do margin é o colapso de margens. Quando duas margens verticais de elementos adjacentes se encontram, a maior delas prevalece em vez de serem somadas.
Sintaxe
margin: auto | length | percentage;auto: O navegador calcula automaticamente a margem. Geralmente usado para centralizar elementos horizontalmente.length: Define um valor fixo (em px, em, rem, etc.).percentage: Define uma margem relativa ao tamanho do elemento pai.
Exemplo Prático
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Margin</title>
<style>
.result {
border: 2px solid rgb(240, 26, 26);
}
.margins {
width: 200px;
height: 200px;
text-align: center;
}
.margin-abreviada {
margin: 20px 10px 30px 40px;
/* top, right, bottom, left */
background-color: rgb(98, 228, 47);
}
.margin-auto {
margin: auto;
background-color: lightcoral;
}
.margin-collapse {
margin: 30px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="result">
<h4>Resultado do exemplo acima - Margin</h4>
<div class="margins margin-abreviada">Margem Abreviada</div>
<div class="margins margin-auto">Margem Auto</div>
<div class="margins margin-collapse">Margem Colapsada</div>
</div>
</body>
</html>Resultado do exemplo acima – Margin
No exemplo, margin: auto centraliza o elemento horizontalmente dentro do elemento pai, enquanto margin-collapse demonstra como margens podem se sobrepor.
Referências
3. A Propriedade padding
Definição
A propriedade padding define o espaço interno entre o conteúdo de um elemento e suas bordas. Assim como margin, pode ser usada como abreviação ou com propriedades específicas para cada lado:
padding-top(preenchimento superior)padding-right(preenchimento direito)padding-bottom(preenchimento inferior)padding-left(preenchimento esquerdo)
Formas de Implementação
- Abreviada: Define os preenchimentos de todos os lados de uma só vez.
padding: 10px 15px 20px 25px; /* top, right, bottom, left */ - Individual: Define preenchimentos específicos para cada lado.
padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px;
Impacto do padding
Ao adicionar padding, o espaço interno aumenta, mas isso não altera a posição externa do elemento. O preenchimento afeta apenas o conteúdo dentro do elemento.
Sintaxe
padding: length | percentage;
length: Valor fixo (px, em, rem, etc.).percentage: Relativo ao tamanho do elemento pai.
Exemplo Prático
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Padding</title>
<style>
.box {
border: 1px solid navy;
}
.padding-abreviado {
padding: 10px 15px 20px 25px; /* top, right, bottom, left */
background-color: rgb(255, 242, 224);
}
.padding-uniforme {
padding: 20px;
background-color: rgb(252, 255, 224);
}
.padding-percentage {
padding: 5%;
width: 80%;
background-color: lightgreen;
}
</style>
</head>
<body>
<h4>Padding</h4>
<div class="box padding-abreviado">Padding Abreviado</div>
<div class="box padding-uniforme">Padding Uniforme</div>
<div class="box padding-percentage">Padding em Porcentagem</div>
</body>
</html>Resultado do exemplo acima – Padding
Referências
4. As Propriedades width e height
Definição
As propriedades width (largura) e height (altura) definem o tamanho de um elemento. Elas podem ser especificadas como valores fixos, percentuais ou automáticos.
width: Controla a largura de um elemento.height: Controla a altura de um elemento.
Valores Comuns
auto: Valor padrão. O navegador calcula automaticamente o tamanho com base no conteúdo e no contexto do elemento pai.length: Define um valor fixo (em px, em, rem, etc.).percentage: Define um tamanho relativo ao elemento pai.max-widthemax-height: Limitam o tamanho máximo do elemento.min-widthemin-height: Estabelecem o tamanho mínimo.
Sintaxe
width: auto | length | percentage;
height: auto | length | percentage;Exemplo Prático
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo Width e Height</title>
<style>
.box {
border: 2px solid navy;
text-align: center;
}
.box-fixed {
width: 200px;
height: 100px;
background-color: rgb(238, 26, 79);
}
.box-percentage {
width: 50%;
height: 150px;
background-color: rgb(184, 230, 173);
}
.box-auto {
width: auto;
height: auto;
background-color: rgb(248, 244, 13);
}
</style>
</head>
<body>
<h4>Width e Height</h4>
<div class="box box-fixed">Tamanho Fixo</div>
<div class="box box-percentage">Tamanho em Porcentagem</div>
<div class="box box-auto">Tamanho Automático</div>
</body>
</html>Resultado do exemplo acima – Width e Height
No exemplo acima, diferentes configurações de width e height demonstram como os valores afetam o tamanho dos elementos.
Referências
[MDN: width](https://developer.mozilla
