Modelo de caixa em CSS | Explicado

CSS, um acrônimo da folha de estilo em cascata é usado para estilizar elementos HTML e todo conteúdo que você vê em uma página da web é um elemento em html e.g texto, ícones, botões e imagens. Cada elemento consome algum espaço na página da web e esse espaço ocupado pelo elemento HTML é conhecido como a caixa desse elemento. O modelo de caixa pode ser representado como a área ocupada pelo elemento HTML, que consiste ainda em várias propriedades como preenchimento, margem e fronteiras.

Esta redação fornecerá um guia passo a passo para entender o modelo da caixa CSS e aprenderemos cada uma das propriedades descritas abaixo em detalhes com a ajuda de exemplos:

• Área de conteúdo no modelo de caixa
• Preenchimento no modelo de caixa
• Fronteiras no modelo de caixa
• Margem no modelo de caixa

Então, sem demora, vamos prosseguir!

Área de conteúdo no modelo de caixa

O conteúdo é uma das partes mais significativas do modelo de caixa que é usado para mostrar o texto, imagens, etc., e o espaço necessário para exibir o conteúdo é conhecido como área de conteúdo. A área de conteúdo pode ser redimensionada usando altura e largura propriedades.

Está presente no centro do modelo da caixa e é destacado como uma área azul na figura a seguir:

Preenchimento no modelo de caixa

O preenchimento não passa de espaço ao redor do conteúdo, ele está presente fora do conteúdo e dentro da área da fronteira. Podemos controlar o preenchimento de cada lado separadamente ou podemos definir o preenchimento de todos os lados ao mesmo tempo usando o preenchimento propriedade. O preenchimento é destacado como uma área verde na figura abaixo:

Border in Box Model

A fronteira mostra ao redor do preenchimento e dentro da margem. As fronteiras podem ser definidas em torno de qualquer elemento HTML, podemos especificar as propriedades da borda para cada lado i.e. topo, esquerda, direita e inferior usando o Propriedades do fundo da fronteira, borda-esquerda, borda-direita e fundo de fronteira respectivamente. Podemos definir toda a fronteira ao mesmo tempo usando fronteira propriedade. A borda é destacada como uma área amarela na figura fornecida abaixo:

Margem no modelo de caixa

O espaço fora da fronteira é chamado de margem. O margem Propriedade define a margem de cada lado individualmente ou como um todo. A margem é destacada como uma área laranja na figura mencionada a seguir:

Exemplo

Vamos considerar um exemplo para entender todo o conceito do modelo de caixa:

Conteúdo: Um elemento HTML presente no centro da caixa
modelo
Preenchimento: preenchimento não passa de espaço em torno do conteúdo, ele está presente fora do conteúdo e dentro do
Área de fronteira
Fronteiras: a fronteira mostra o estofamento e dentro da margem
Margem: o espaço fora da janela da fronteira é chamado de margem

O snippet acima, define a largura do conteúdo de 500px, altura 100px, borda 5px e preenchimento 10px, como resultado, mostra a seguinte saída:

O redox do governante é usado para calcular a altura e a largura, mostra a largura total igual a 530, e a altura total é igual a 130.

Como verificar a largura e a altura do modelo de caixa

Largura total = margem esquerda + border esquerda + Padding esquerdo + Largura da área de conteúdo + Atacamento direito + Border direita + Margem direita
Largura = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px Altura total = margem-top + borda-top + t-top + altura do conteúdo + preenchimento-ganho
Altura = 0 + 5px + 10px + 100px + 10px + 5px + 0px = 130px

Conclusão

Modelo de caixa especifica o design e o layout de qualquer página da web utilizando várias propriedades CSS, como borda, altura, largura, margem e preenchimento. Esta redação demonstrou uma visão geral abrangente do modelo CSS Box, onde aprendemos a usar o modelo da caixa para personalizar o layout de qualquer elemento HTML.