{"id":542,"date":"2020-07-03T10:01:08","date_gmt":"2020-07-03T13:01:08","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=542"},"modified":"2022-12-09T08:45:43","modified_gmt":"2022-12-09T11:45:43","slug":"modelo-de-caixa-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/modelo-de-caixa-css\/","title":{"rendered":"Modelo de caixa CSS"},"content":{"rendered":"

Todos os elementos HTML<\/code> podem ser considerados como caixas.\u00a0No CSS<\/code>, o termo “modelo de caixa” \u00e9 usado quando se fala em design e layout.<\/p>\n

O modelo de caixa CSS<\/code> \u00e9 essencialmente uma caixa que envolve todos os elementos HTML<\/code>.\u00a0Consiste em: margens, bordas, preenchimento e o conte\u00fado real.\u00a0A imagem abaixo ilustra o modelo da caixa:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Explica\u00e7\u00e3o das diferentes partes:<\/strong><\/p>\n

Conte\u00fado<\/strong> – o conte\u00fado da caixa, onde o texto e as imagens aparecem
\nPreenchimento<\/strong> – Limpa uma \u00e1rea ao redor do conte\u00fado. O estofamento \u00e9 transparente
\nBorda<\/strong> – uma borda que circunda o preenchimento e o conte\u00fado
\nMargem<\/strong> – Limpa uma \u00e1rea fora da borda. A margem \u00e9 transparente<\/p>\n

O modelo de caixa permite adicionar uma borda ao redor dos elementos e definir o espa\u00e7o entre os elementos.<\/p>\n

Exemplo<\/strong>
\nDemonstra\u00e7\u00e3o do modelo de caixa:<\/p>\n

div {<\/code>
\nwidth: 300px;<\/code>
\nborder: 15px solid green;<\/code>
\npadding: 50px;<\/code>
\nmargin: 20px;<\/code>
\n}<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  background-color: lightgrey;\r\n  width: 300px;\r\n  border: 15px solid green;\r\n  padding: 50px;\r\n  margin: 20px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Demonstrating the Box Model<\/h2>\r\n\r\n<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>\r\n\r\n<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>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n


<\/center>\n
Largura e altura de um elemento<\/strong><\/p>\n
Para definir a largura e a altura de um elemento corretamente em todos os navegadores, voc\u00ea precisa saber como o modelo de caixa funciona.<\/p>\n
Importante: Ao definir as propriedades de largura e altura de um elemento com CSS, basta definir a largura e a altura da \u00e1rea de conte\u00fado . Para calcular o tamanho total de um elemento, voc\u00ea tamb\u00e9m deve adicionar preenchimento, bordas e margens.<\/span><\/p>\n
Exemplo<\/strong><\/p>\n
Este elemento <div><\/strong> ter\u00e1 uma largura total de 350px:<\/p>\n
div {<\/code>
\nwidth: 320px;<\/code>
\npadding: 10px;<\/code>
\nborder: 5px solid gray;<\/code>
\nmargin: 0;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ndiv {\r\n  width: 320px;\r\n  padding: 10px;\r\n  border: 5px solid gray;\r\n  margin: 0;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Calculate the total width:<\/h2>\r\n\r\n<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-css-1-300x169.jpg\" width=\"350\" height=\"263\" alt=\"Klematis\">\r\n<div>The picture above is 350px wide. The total width of this element is also 350px.<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Aqui est\u00e1 o c\u00e1lculo:<\/p>\n
320<\/strong>\u00a0px\u00a0(largura)
\n+ 20\u00a0px (\u00a0preenchimento
\nesquerdo + direito)
\n+ 10 px (\u00a0borda esquerda + direita)\u00a0+ 0 px (margem esquerda + direita)
\n= 350 px<\/strong><\/div>\n
A largura total de um elemento deve ser calculada assim:<\/strong><\/p>\n
\"\"<\/p>\n
Largura total do elemento = largura + preenchimento esquerdo + preenchimento direito + borda esquerda + borda direita + margem esquerda + margem direita<\/p>\n
A altura total de um elemento deve ser calculada assim:<\/p>\n
Altura total do elemento = altura + preenchimento superior + preenchimento inferior + borda superior + borda inferior + margem superior + margem inferior<\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n