Modelo de caixa CSS

Índice

Todos os elementos HTML podem ser considerados caixas.

O modelo de caixa CSS

Em CSS, o termo “modelo de caixa” é usado quando se fala em design e layout.

O modelo de caixa CSS é essencialmente uma caixa que envolve cada elemento HTML. Consiste em: margens, bordas, preenchimento e o conteúdo real. A imagem abaixo ilustra o modelo de caixa:

Explicação das diferentes partes:

Conteúdo - O conteúdo da caixa, onde aparecem textos e imagens
Preenchimento - Limpa uma área ao redor do conteúdo. O preenchimento é transparente
Borda - Uma borda que circunda o preenchimento e o conteúdo
Margem - Limpa uma área fora da fronteira. A margem é transparente

O modelo de caixa nos permite adicionar uma borda ao redor dos elementos e definir o espaço entre elementos.

Exemplo

Demonstração do modelo de caixa:

div {
  width: 300px;
  border: 15px solid 
green;
  
padding: 50px;
  
margin: 20px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Largura e altura de um elemento

Para definir corretamente a largura e a altura de um elemento em todos os navegadores, você precisa saber como funciona o modelo de caixa.

Importante: quando você define as propriedades de largura e altura de um elemento com CSS, basta definir a largura e a altura da área de conteúdo. Para calcular o tamanho total de um elemento, você também deve adicionar preenchimento, bordas e margens.

Exemplo

Este elemento <div> terá uma largura total de 350px:

div {	width: 320px;
   
padding: 10px;
   
border: 5px solid gray;
   
margin: 0;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>

</body>
</html>

Aqui está o cálculo:

320px (largura)
+ 20px (preenchimento esquerdo + direito)
+ 10px (borda esquerda + direita)
+ 0px (margem esquerda + direita)
= 350px

A largura total de um elemento deve ser calculada assim:

Largura total do elemento=largura + preenchimento esquerdo + preenchimento direito + esquerdo borda + borda direita + margem esquerda + margem direita

A altura total de um elemento deve ser calculada assim:

Altura total do elemento=altura + preenchimento superior + preenchimento inferior + topo borda + borda inferior + margem superior + margem inferior

Nota: A propriedade margin também afeta o espaço total que a caixa ocupará a página, mas a margem não está incluída no tamanho real da a Caixa. A largura e altura total da caixa param na borda.