O modelo de caixa CSS explicado com exemplos

Se você está planejando construir um layout de página da web incrível, você precisa saber sobre margens, bordas, preenchimento e conteúdo. Cada elemento em web design, seja uma imagem ou texto, usa uma caixa com essas propriedades. Você pode facilmente construir layouts complexos brincando com o modelo de caixa. Neste artigo, dissecaremos o CSS Box Model e mostraremos como usar essas propriedades com exemplos práticos.

O que é o CSS Box Model?

O modelo de caixa CSS é um padrão criado pelo World Wide Web Consortium. Ele descreve todos os elementos em um documento HTML como caixas retangulares com suas próprias dimensões. Essas caixas contêm uma área de conteúdo e margens opcionais, bordas e áreas de preenchimento ao redor. Então, vamos explorar as partes de uma caixa CSS.

Vamos descobrir as quatro camadas do modelo de caixa CSS.

Primeira Camada: Conteúdo

A área de conteúdo contém o conteúdo principal do elemento, que pode ser uma imagem, texto ou qualquer forma de conteúdo de mídia. Você pode modificar as dimensões dos elementos de nível de bloco usando

altura e largura propriedades.

Segunda Camada: Preenchimento

Preenchimento é o espaço entre a caixa de conteúdo e sua caixa de borda. Embora fique em torno do seu conteúdo como um espaço em branco, você pode usar uma cor de fundo para visualizar a diferença. Você pode aplicar tampo de enchimento, padding-right, acolchoamento inferior, e padding-left propriedades para modificar o espaço.

Terceira Camada: Borda

A borda envolve o conteúdo e a área de preenchimento. Você pode redimensionar e estilizar a borda usando largura da borda, estilo de borda, e Cor da borda propriedades.

Quarta camada: Margem

A última camada do modelo de caixa é amplamente usada para gerar espaço entre os elementos. A margem envolve o conteúdo, o preenchimento e a área da borda. Você pode usar margem superior,margem direita, margem inferior, e margem esquerda propriedades. Você também pode atribuir à propriedade de margem um valor negativo ou auto para alcançar algumas técnicas de posicionamento impressionantes.

Configuração do projeto para modelo de caixa CSS

Vamos construir um miniprojeto para demonstrar o modelo de caixa básico com uma caixa de conteúdo e propriedades de preenchimento, borda e margem. Você pode ir com texto, imagem ou conteúdo de mídia. Vamos começar certificando-nos de que está devidamente estruturado.

Estrutura com HTML

Saída:

Você pode usar recursos integrados de seu navegador, como o Ferramentas de desenvolvedor do Chrome, para ver o que está acontecendo. Estamos usando duas imagens do Unsplash. Para simplificar, vamos ocultar a imagem do smartphone usando Mostrar nenhum; até precisarmos mais tarde.

Estilo usando CSS

/*************************
ESTILO BÁSICO
*************************/
* {
margem: 0px;
preenchimento: 0px;
}
corpo {
display: flex;
direção flexível: fileira;
} 
.exibição {
display: nenhum! importante;
}

Agora, vamos estilizar nossa caixa de conteúdo. Primeiro, vamos definir o altura e largura da imagem. Além disso, fornecer uma cor de fundo ajuda na melhor visualização. Então, vamos fazê-lo.

/*************************
CAIXA DE CONTEÚDO
*************************/
.content-box {
display: flex;
direção flexível: fileira;
justificar o conteúdo: centro;
alinhar-itens: centro;
/ * Definir o estilo da caixa de conteúdo usando propriedades de altura e largura * /
cor de fundo: #fdf;
altura: 20em;
largura: 30em;
}

Dê espaço ao conteúdo para respirar com acolchoamento

Você pode definir tampo de enchimento, padding-right, acolchoamento inferior, e padding-left propriedades individualmente ou usar a abreviação. Tente usar a abreviação, se possível, pois pode economizar algum tempo. Vamos ver como funciona o preenchimento.

 /*************************
PREENCHIMENTO
*************************/
/ * Aplicando preenchimento * /
acolchoamento superior: 5em;
padding-right: 2em;
acolchoamento inferior: 8em;
padding-left: 2em;
/ * Abreviatura de preenchimento * /
/ * superior / direita / inferior / esquerda * /
preenchimento: 5em 2em 8em 2em;
/ * superior / horizontal / inferior * /
preenchimento: 5em 2em 8em;

Saída:

Desenhe linhas ao redor do preenchimento usando a borda

Ao aplicar a propriedade da borda, certifique-se de que está usando o Cor da borda para dar à borda uma cor distinta do fundo. Você pode selecionar o estilo de borda individualmente ou de uma vez usando a propriedade taquigrafia. O mesmo se aplica ao largura da borda propriedade.

Você também pode definir o raio de fronteira para dar à caixa cantos arredondados com um raio em px, rem, em, ou porcentagem.

 /*************************
FRONTEIRA
*************************/
/ * Aplicando propriedades de borda * /
/ * Definir a cor da borda * /
cor da borda: rgb (148, 234, 255);
/ * Selecionar estilo de borda * /
estilo border-top: sólido;
estilo da borda direita: tracejado;
estilo de borda inferior: ranhura;
estilo borda esquerda: cume;
/ * abreviação de estilo de borda * /
/ * superior / direita / inferior / esquerda * /
estilo de borda: sulco sólido tracejada;
/ * Definir largura da borda * /
largura da borda superior: 4em;
border-right-width: 2em;
largura da borda inferior: 2em;
largura da borda esquerda: 2em;
/ * abreviação da largura da borda * /
/ * superior / direita / inferior / esquerda * /
largura da borda: 4em 2em 2em 2em;
/ * superior / horizontal / inferior * /
largura da borda: 4em 2em 2em;
/ * abreviação de propriedade de fronteira * /
/ * borda: 4em sólido rgb (148, 234, 255); */
/ * Set border-radius * /
raio da borda: 5em;
raio da borda: 20%;

Saída:

Adicionar espaço entre as caixas com margem

Você pode centralizar uma caixa horizontalmente usando margem: 0 auto, desde que tenha uma largura definida.

 /*************************
MARGEM
*************************/
/ * Aplicando propriedades de margem * /
margem superior: 4em;
margem direita: 5em;
margem inferior: 3em;
margem esquerda: 5em;
/ * Margem abreviada * /
/ * superior / direita / inferior / esquerda * /
margem: 4em 5em 3em 5em;
/ * superior / horizontal / inferior * /
margem: 4em 5em 3em;
/ * Usando margem automática * /
margem: 3em auto;

Saída:

Você pode especificar a propriedade da margem usando um, dois, três ou quatro valores. Os valores podem ser um comprimento, porcentagem ou uma palavra-chave como auto. Vamos entender como funciona:

• Quando você especifica apenas um valor, significa que todos os quatro lados terão a mesma margem.
• Quando você especifica dois valores, o primeiro valor significa margem superior e margem inferior enquanto o segundo valor especifica margem direita e margem esquerda.
• Quando você especifica três valores, o primeiro e o último se aplicam a margem superior e margem inferior respectivamente. O valor do meio é para a área horizontal, ou seja, margem direita e margem esquerda.
• Quando você especifica todos os quatro valores, eles se aplicam à parte superior, direita, inferior e esquerda (no sentido horário), respectivamente.

Observe que você também pode usar esses atalhos para propriedades de preenchimento e borda.

Veja também: A folha de dicas de propriedades CSS3 essenciais

Você já usou uma margem negativa? Para visualizar vamos apagar Mostrar nenhum para exibir nossa segunda imagem e, em seguida, defina uma margem negativa.

/* .exibição {
display: nenhum! importante;
} */
.content-box {
display: flex;
direção flexível: fileira;
alinhar-itens: centro;
cor de fundo: #fdf;
altura: 20em;
largura: 30em;
preenchimento: 5em 2em 8em;
estilo de borda: sulco sólido tracejada;
largura da borda: 4em 2em 2em;
raio da borda: 20%;
/ * Usando margem negativa * /
margem: 3em -20em 3em 5em;
}

Saída:

O modelo da caixa: criando um site perfeito do pixel

O modelo de caixa permite definir o espaço entre os elementos, adicionar bordas e construir facilmente um layout de aparência complexa. Você pode começar imediatamente a criar um site incrível. Enquanto isso, você pode explorar o moldura em detalhes e brinque com o código acima.

Você deve entender que existem outros métodos de layout de conteúdo em CSS. Isso inclui CSS Grid e CSS Flexbox. Quando estiver confortável com o modelo de caixa, você deve continuar aprendendo sobre essas alternativas.

Tutorial CSS Flexbox: o básico

Posicione perfeitamente seus elementos HTML com a ajuda do CSS Flexbox.

Leia a seguir

Sobre o autor