Como organizar o layout de sua página da web com o modelo de caixa
As propriedades CSS margin , border e padding são usadas em qualquer elemento HTML para criar um efeito único. Eles trabalham juntos para garantir que sua página da web seja organizada e apresentável.
Destas três propriedades, a propriedade border pode parecer mais familiar, pois geralmente é facilmente identificada em uma página da web. No entanto, usar a propriedade border não pareceria tão apresentável como na maioria dos sites se o desenvolvedor também não editasse as propriedades de preenchimento e margem .
Neste tutorial, você aprenderá sobre o modelo de caixa e como cada uma de suas camadas funciona em conjunto para organizar o conteúdo em um site.
O que é o CSS Box Model?
O modelo de caixa CSS é essencialmente uma caixa que contém cada elemento HTML. O modelo de caixa consiste em quatro camadas (como você pode ver na imagem abaixo), e cada camada tem uma finalidade única.
A primeira camada é encontrada no centro do modelo de caixa. Esta é a posição dada a cada elemento HTML. Na imagem acima, o valor auto x auto está sendo exibido na posição central, mas esse valor será substituído pela largura x altura de cada elemento HTML.
A propriedade padding está localizada entre o elemento HTML e a propriedade border , e a propriedade margin está localizada no lado externo da propriedade border . As propriedades de preenchimento e borda geralmente não têm valores padrão visíveis para um determinado elemento CSS. No entanto, um valor de propriedade de margem padrão é encontrado em alguns elementos HTML, a saber, o elemento p – que tem um valor padrão de 16px na parte superior e na parte inferior.
Usando a propriedade de margem CSS
A propriedade margin tem quatro subpropriedades: margin-top , margin-right , margin-bottom e margin-left . Essas propriedades são usadas individualmente para criar o tamanho de margem desejado em um lado específico de um elemento ou como um grupo simplesmente usando a propriedade de margem abreviada.
Estrutura da propriedade de margem
Selector {
margin: margin-top margin-right margin-left margin-bottom;
}O exemplo acima representa a estrutura básica da propriedade de margem . O primeiro valor na pilha de valores atribuído à propriedade de margem tem como alvo o topo, o segundo valor tem como alvo a direita, o terceiro tem como alvo a esquerda e o quarto tem como alvo a parte inferior de um elemento.
Usando o Exemplo de Propriedade de Margem
p{
margin: 20px 10px 20px 10px;
}O código acima atribui efetivamente uma margem de 20 px na parte superior, 10 px à direita, 20 px na parte inferior e 10 px à esquerda de todos os elementos p em uma página da web específica. No entanto, o mesmo efeito que o código acima produz pode ser alcançado com menos código:
p{
margin: 20px 10px;
}O código acima produzirá o mesmo resultado do fragmento de código anterior. O primeiro valor atribuído à propriedade margin terá como alvo o topo e a base, e o segundo valor terá como alvo os lados direito e esquerdo de todos os elementos p em uma página da web.
Se houver um caso em que a margem que deve ser atribuída a todos os quatro lados de um elemento HTML é a mesma, você pode usar o seguinte código para fazer isso:
p{
margin: 20px;
}O código acima atribui uma margem de 20 px a todos os quatro lados dos elementos p em uma página da web.
Descompactando a propriedade CSS da borda
No modelo de caixa CSS, a propriedade border é a terceira camada. Como margin , a propriedade border tem várias subpropriedades que você pode usar em um valor de pilha. Mas, ao contrário da propriedade margin , nem todas as subpropriedades de borda precisam estar presentes para que a propriedade border funcione corretamente. Há apenas uma propriedade que precisa estar presente: a propriedade border-style .
Exemplo de estrutura de propriedade de borda básica
Selector{
border: border-style;
}A propriedade border-style no exemplo acima pode assumir a forma de um de vários valores. Por exemplo, se você deseja uma borda sólida ao redor de todos os parágrafos em sua página da web, o código a seguir pode ajudar:
p{
border: solid;
}A propriedade border também permite que um desenvolvedor direcione lados específicos de um elemento HTML com as seguintes quatro subpropriedades:
- borda esquerda
- fronteira direita
- borda superior
- borda inferior
Se houver uma instância em que você precisa colocar uma borda em apenas um lado de um elemento, você pode usar a subpropriedade apropriada da lista acima.
Descompactando a propriedade border-style
Embora nem sempre esteja visível, cada elemento HTML é circundado pela propriedade border . Sua incapacidade de ver a propriedade border em alguns casos é porque o valor padrão da propriedade border-style é nenhum. Você pode atribuir muitos valores diferentes à propriedade border-style , sendo alguns dos mais populares:
- sólido
- Duplo
- pontilhado
- traço
Usando a propriedade border com um valor de pilha
Três valores podem ser atribuídos à propriedade border para obter um resultado específico. Esses valores são as propriedades de largura da borda, estilo da borda e cor da borda . Portanto, se você deseja criar uma borda vermelha sólida em torno de um parágrafo com largura de 2 px, o código a seguir fará isso:
p{
border: 2px solid red;
}Você também pode usar o valor da pilha em um lado de um elemento, substituindo a propriedade border no exemplo acima pela subpropriedade que tem como alvo o lado apropriado. Por exemplo, se você deseja direcionar apenas o lado esquerdo de todos os parágrafos com o mesmo valor de pilha acima, você pode simplesmente substituir “borda” no exemplo acima pela propriedade “borda esquerda”.
Usando a propriedade CSS Padding
A propriedade CSS padding é muito semelhante à propriedade margin . A propriedade padding tem quatro subpropriedades, padding-top , padding-right , padding-bottom e padding-left . Você pode usar cada subpropriedade individualmente ou alimentá-los como um valor de pilha para a propriedade de preenchimento .
Como a margem , se apenas dois valores forem atribuídos à propriedade de preenchimento , o primeiro terá como alvo os lados superior e inferior do elemento e o segundo terá como alvo os lados esquerdo e direito. Se apenas um valor for fornecido, todos os lados terão o mesmo tamanho de preenchimento .
Os três conjuntos de código a seguir produzirão o mesmo resultado em todos os elementos p em uma página da web.
Usando Quatro Valores de Preenchimento
p{
padding: 20px 20px 20px 20px;
}Usando Dois Valores de Preenchimento
p{
padding: 20px 20px;
}Usando Um Valor de Preenchimento
p{
padding: 20px 20px;
}Usando o CSS Box Model
Usar as propriedades de borda , margem e preenchimento o ajudará a organizar sua página da web, não importa o tipo de página. Veja como usá-los em conjunto:
Exemplo de documento HTML básico
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Box Model</title>
</head>
<body>
<div class="box">
<h1>Heading One</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
<div class="box">
<h1>Heading Two</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
</body>
</html>
O código acima produzirá a seguinte saída no navegador:
A imagem acima exibe dois elementos div , cada um contendo um título e um parágrafo. Cada elemento div tem uma margem , borda e preenchimento de 0 px, largura de 1042 px e altura de 112,438 px, como você pode ver no modelo de caixa abaixo.
O uso da propriedade border fornece uma perspectiva mais clara do que está acontecendo na página.
Usando a propriedade de fronteira
.box{
border: solid;
}Usar o código CSS acima produzirá a seguinte saída em seu navegador:
Agora que a propriedade border está visível, ela tem uma largura padrão de 3px, conforme visto no modelo de caixa abaixo.
Como você pode ver no modelo de caixa acima, a propriedade da margem está no lado externo da borda . Portanto, você pode usá-lo para criar algum espaço entre os dois elementos div que se tocam.
Usando a propriedade de margem
.box{
border: solid;
margin: 20px;
}Introduzir margem com o código acima criará a seguinte saída em seu navegador:
Isso é um pouco melhor, não é? Há espaço adequado entre os elementos div . Todos os lados de cada elemento div agora têm uma margem de 20px, como você pode ver no modelo de caixa abaixo.
Agora você pode se concentrar no interior da borda, que é onde a propriedade de preenchimento se enquadra no modelo de caixa.
Usando a propriedade padding
.box{
border: solid;
margin: 20px;
padding: 10px;
}O código acima produzirá a seguinte saída em seu navegador:
Como você pode ver na imagem acima, o texto dentro da borda agora se afastou das bordas por causa da propriedade padding . O modelo de caixa abaixo mostra que todas as camadas do modelo de caixa agora estão em uso.
Experiência com propriedades CSS
Agora você tem uma compreensão do modelo de caixa e como cada elemento dentro dele funciona em conjunto para alcançar um resultado específico. Você pode tentar atribuir um valor de pilha à propriedade da borda e alterar a cor da borda para vermelho, ou pode substituir a propriedade da borda por sua subpropriedade da borda esquerda e ver o que acontece.
Existem muitas outras propriedades CSS para você explorar e, com a folha de dicas CSS, você pode experimentar cada uma delas.
