{"id":16857,"date":"2018-10-24T09:24:47","date_gmt":"2018-10-24T12:24:47","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=16857"},"modified":"2019-03-16T02:24:28","modified_gmt":"2019-03-16T05:24:28","slug":"box-model-css-entenda-como-funciona","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/box-model-css-entenda-como-funciona\/","title":{"rendered":"Box Model CSS &#8211; Entenda como funciona"},"content":{"rendered":"<p>Quando criamos alguma estiliza\u00e7\u00e3o em elementos via CSS, \u00e9 comum ao definir uma largura (width) adicionar outras propriedades. Ao ser renderizado pelo navegador, ele possui um tamanho maior do que voc\u00ea definiu, ou espa\u00e7o por ela ocupado ficou maior que voc\u00ea calculou.<\/p>\n<p>Isso acontece porque a largura ocupada por esse elemento \u00e9 composta em 4 partes: <em>conte\u00fado, espa\u00e7amento, borda e margem<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-16858\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-model.jpg\" alt=\"\" width=\"500\" height=\"300\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-model.jpg 500w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-model-24x14.jpg 24w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<ol>\n<li>Conte\u00fado;<\/li>\n<li>Espa\u00e7amento (Padding);<\/li>\n<li>Borda (Border);<\/li>\n<li>Margem (Margin).<\/li>\n<\/ol>\n<p>O espa\u00e7o ocupado por esse elemento ir\u00e1 levar em conta esses 4 itens na hora realizar o c\u00e1lculo do seu tamanho e posi\u00e7\u00e3o na hora da renderiza\u00e7\u00e3o da\u00a0 p\u00e1gina.<\/p>\n<p>Vamos criar um elemento e definir uma largura, altura,\u00a0 borda e um espa\u00e7amento. Criaremos primeiro o elemento HTML:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"box\"&gt;&lt;\/div&gt;<\/pre>\n<p>Criamos uma div, com uma classe chamada <em>&#8220;box&#8221;<\/em>. Agora iremos adicionar um c\u00f3digo CSS:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.box{\r\n    width:200px; \r\n    height:100px;\r\n    border:5px solid #ccc;\r\n    padding:10px; \r\n    background:#3ab87a;\t\t\t\t\t\t\t\r\n}<\/pre>\n<p>Foi definido uma largura de 200px, altura de 100px, uma borda com espessura de 5px para os lados (topo, base, direito e esquerdo), com estilo s\u00f3lido, uma cor e uma espa\u00e7amento de 10px para o topo, base, direito e esquerdo, al\u00e9m de uma cor de fundo para o elemento.<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/b90xakgc\/embed\/html,css,result\/dark\/\"><\/script><\/p>\n<p>Te pergunto: Qual o tamanho desse box?<\/p>\n<p>Automaticamente, como foi definido a largura e altura, voc\u00ea responderia\u00a0&#8220;as dimens\u00f5es que foram configuradas&#8221;.<\/p>\n<p>S\u00f3 que na verdade esse box \u00e9 renderizado com uma largura de 230px e altura de 130px. Como assim?<\/p>\n<p>Veja\u00a0 pelo inspetor de elementos do Chrome, selecionando a div que foi criada:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-16864\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-render-default.jpg\" alt=\"\" width=\"236\" height=\"171\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-render-default.jpg 236w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-render-default-24x17.jpg 24w\" sizes=\"(max-width: 236px) 100vw, 236px\" \/><\/p>\n<p>Vamos calcular agora para chegarmos a esses valores, come\u00e7ando pela largura:<\/p>\n<p>Largura (width) : <strong>200px<\/strong><br \/>\nBorda (border) : <strong>5px<\/strong> para lado direito + <strong>5px<\/strong> para o lado esquerdo = <strong>10px<\/strong><br \/>\nEspa\u00e7amento (padding): <strong>10px<\/strong> para o lado direito + <strong>10px<\/strong> para o lado esquerdo = <strong>20px<\/strong><br \/>\nO valor final : <strong>200px + 10px + 20px\u00a0 = 230px<\/strong><\/p>\n<p>Agora vamos ver a altura:<\/p>\n<p>Altura(height) : <strong>100px<\/strong><br \/>\nBorda (border): <strong>5px<\/strong> para lado superior + <strong>5px<\/strong> para o lado inferior = <strong>10px<\/strong><br \/>\nEspa\u00e7amento (padding): <strong>10px<\/strong> para o lado superior + <strong>10px<\/strong> para o lado inferior = <strong>20px<\/strong><br \/>\nO valor final: <strong>100px + 10px + 20px = 130px<\/strong><\/p>\n<p>Veja que o navegador levou em conta tanto os espa\u00e7amentos quanto a borda para calcular o tamanho do elemento a ser renderizado na p\u00e1gina.<\/p>\n<p>Para ver cada item sendo aplicado, utilize o Chrome, clicar com bot\u00e3o direito em cima do elemento, e v\u00e1 em inspecionar elemento. Do lado direito, clique na aba <em>&#8220;Computed&#8221;<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-16865 size-full\" title=\"Box Model - Inspecionador de elementos\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed.jpg\" alt=\"Box Model - Inspecionador de elementos\" width=\"517\" height=\"211\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed.jpg 517w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed-370x150.jpg 370w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed-24x10.jpg 24w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><\/p>\n<p>Voc\u00ea consegue visualizar o tamanho do elemento, e cada valor de propriedade sendo aplicada.<\/p>\n<h2>Como podemos resolver isso com CSS3?<\/h2>\n<p>O CSS3 trouxe uma propriedade chamada <em>box-sizing<\/em>, o qual \u00e9 poss\u00edvel alterar o comportamento do <em>Box Model<\/em>. Por padr\u00e3o, o valor definido \u00e9 <em>content-box<\/em>, as propriedades <em>width<\/em> e <em>height<\/em> s\u00e3o calculadas incluindo s\u00f3 o conte\u00fado quando adicionamos as propriedades de<em> border <\/em>e <em>padding.\u00a0\u00a0<\/em>Ele n\u00e3o leva em conta na hora de realizar o c\u00e1lculo e acrescenta nas dimens\u00f5es do elemento.<\/p>\n<p>Vamos utilizar outro valor que \u00e9 <em><strong>border-box<\/strong><\/em>, onde ele vai levar em conta os valores definidos pelo <em>padding<\/em> e por <em>border<\/em>\u00a0na hora de renderizar.<\/p>\n<p>O c\u00e1lculo para definir as dimens\u00f5es do elemento ser\u00e1 levando em conta para que o elemento tenha dimens\u00e3o definida pelo <em>width<\/em> e <em>height<\/em>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.box{\r\n    width:200px;\r\n    height:100px;\r\n    border:5px solid #ccc;\r\n    padding:10px;\r\n    background:#3ab87a;\t\t\t\r\n    box-sizing: border-box;\r\n}<\/pre>\n<p>Veja como aparece no inspetor de elementos do navegador:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-16866\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-render-border-content.jpg\" alt=\"\" width=\"216\" height=\"142\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-render-border-content.jpg 216w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/box-render-border-content-24x16.jpg 24w\" sizes=\"(max-width: 216px) 100vw, 216px\" \/><\/p>\n<p>Veja que agora, ao inspecionar o elemento, ele est\u00e1 com\u00a0 largura de <em>200px<\/em> e altura de <em>100px<\/em>, da mesma forma que foi definido pelo<em> width<\/em> e <em>height<\/em>. Vamos ver agora como est\u00e1 sendo realizado o c\u00e1lculo, indo pelo inspetor de elementos, na aba &#8220;<em>Computed&#8221;<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-16868\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed-box-content-600x207.jpg\" alt=\"\" width=\"600\" height=\"207\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed-box-content-600x207.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed-box-content-24x8.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/09\/computed-box-content.jpg 610w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Veja que agora, o espa\u00e7o reservado ao conte\u00fado est\u00e1 com uma <em>largura de 170px<\/em>\u00a0 e uma <em>altura de 70px<\/em> , porque foi inclu\u00eddo tanto o <em>border<\/em> e <em>padding<\/em> na hora de realizar o c\u00e1lculo das dimens\u00f5es.<\/p>\n<p>Utilizando assim a propriedade<em>box-sizing<\/em>, voc\u00ea consegue modificar o comportamento padr\u00e3o do Box Model, sem ser surpreendido na hora de posicionar seus elementos no seu layout.<\/p>\n<p>E a\u00ed, gostou? J\u00e1 conhecia o conceito de Box Model?<\/p>\n<p>Deixe seu coment\u00e1rio.<\/p>\n<p>Um abra\u00e7o!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando criamos alguma estiliza\u00e7\u00e3o em elementos via CSS, \u00e9 comum ao definir uma largura (width) adicionar outras propriedades. Ao ser renderizado pelo navegador, ele possui um tamanho maior do que voc\u00ea definiu, ou espa\u00e7o por ela ocupado ficou maior que voc\u00ea calculou. Isso acontece porque a largura ocupada por esse elemento \u00e9 composta em 4 [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":17041,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-16857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=16857"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/17041"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=16857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=16857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=16857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}