CSS - Definindo o cálculo de dimensões com box-sizing \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 09 Horas 46 Min 40 Seg Tempo restante da oferta: 09 46 40 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS - Definindo o cálculo de dimensões com box-sizing [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS - Definindo o cálculo de dimensões com box-sizing Aprenda a definir como o CSS calcula as dimensões dos seus elementos e evite que seu layout quebre inesperadamente. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07102001/CSS-Box-Model.png) Olá web developer! Ao estilizar elementos no CSS, muitas vezes precisamos definir dimensões. Porém, o modo como as dimensões dos elementos são calculadas podem causar alguns problemas. Onde quero chegar com isso? Bom, algumas pessoas desconhecem que temos duas maneiras de calcular o tamanho dos elementos. Você conhece? ## Tamanho baseado no conteúdo Imagine uma `div` com um texto dentro. Vamos definir sua largura como `100px` e altura também sendo `100px`. Isso deveria resultar em um quadrado, já que largura e altura estão iguais, certo? Mas e se eu colocar uma margem interna (padding) de `50px` à esquerda? Qual será o tamanho? ```css .box{ width: 100px; height: 100px; padding-left: 50px; } ``` Veja que o resultado foi um retângulo com uma largura de `150px`. A forma padrão de se calcular o tamanho de um elemento é a soma de sua largura ou altura (width ou height), margem interna (padding) e grossura da borda (border). Isso pode causar problemas em algumas ocasiões. Imagine que agora a gente queira criar um elemento que preencha 100% da largura de seu pai, mas que também tenha uma margem interna para que o texto não fique encostado em suas bordas. Para isso, vou criar um container para essa nossa caixa: ```css .container{ width: 100px; height: 100px; border: 5px solid rgba(0,0,0,0.5); } ``` E vou mudar a nossa caixa agora para que a largura seja `100%` ao invés de deixar `100px` fixos. Assim, nossa caixa poderá preencher dinamicamente dependendo do tamanho do elemento pai. ```css .box{ width: 100%; height: 100px; padding-left: 50px; } ``` Teremos o seguinte resultado: Veja que a nossa caixa ultrapassou o tamanho do seu elemento pai, pois o `padding-left` de 50px foi somado à largura, resultado em uma largura total de 150px. Isso pode ser a causa de problemas quando vamos definir dimensões de um elemento dentro de outro e o layout acaba quebrando quando pensamos que deveria estar tudo certo. ## Tamanho baseado nas bordas Para evitar o problema mostrado anteriormente, podemos usar a propriedade `box-sizing` para indicar como queremos que o navegador calcule as dimensões dos elementos. O valor padrão do `box-sizing` é `content-box`. Veja o que acontece quando alteramos para `border-box`: ```css .box{ width: 100%; height: 100px; padding-left: 50px; box-sizing: border-box; } ``` O `box-sizing` com o valor `border-box` faz com que o navegador não calcule a dimensão de um elemento somando bordas e margens com altura e largura. Com `content-box`, ao definir `width: 100px`, o interior (conteúdo) do elemento terá 100px, mas por termos `padding-left: 50px`, o tamanho total do elemento será 150px. Com `border-box`, se definirmos por exemplo, `width: 100px`, não importa se colocarmos `padding-left: 50px`, o tamanho final do elemento será os 100px que definimos em `width`. Mas como definimos 50px de `padding-left`, agora o interior do elemento terá apenas 50px de espaço para que o elemento possua 100px de largura no total. Para evitar problemas, muitas pessoas gostam de forçar o comportamento de todos os elementos e pseudo-elementos como `border-box` usando o seguinte código: ```css *, *::before, *::after { box-sizing: border-box; } ``` Dependendo do que você está criando, se está trabalhando com texto, criando layouts, etc, cada comportamento pode ser o mais indicado. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #border-box ](https://www.treinaweb.com.br/blog/tag/border-box) - [ #css box model ](https://www.treinaweb.com.br/blog/tag/css-box-model) - [ #Layout quebrado ](https://www.treinaweb.com.br/blog/tag/layout-quebrado) - [ #Problemas com largura de elementos no css ](https://www.treinaweb.com.br/blog/tag/problemas-com-largura-de-elementos-no-css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/pixel_fisico_pixel_css-400x280.jpg) [ Sem categoria ](https://www.treinaweb.com.br/blog/categoria/sem-categoria) 4 anos atrás ## [ Pixel físico e pixel CSS ](https://www.treinaweb.com.br/blog/pixel-fisico-e-pixel-css) Nesse artigo você irá entender ao certo, a diferença entre esses dois tipos de pixels, e o que isso impacta no desenvolvimento Front end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Ordenação-de-Cores-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Ordenando Elementos por Cores ](https://www.treinaweb.com.br/blog/javascript-ordenando-elementos-por-cores) Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075048/Font-Awesome-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Dominando o Font Awesome ](https://www.treinaweb.com.br/blog/css-dominando-o-font-awesome) Aprenda como utilizar todo o potencial do Font Awesome para facilitar o uso de ícones em suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/01152250/ALINHAMENTO-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-1-containers) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver primeiro as propriedades dos containers. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/HERDANDO-TEMPLATES-JINJA-400x280.png) [ Flask ](https://www.treinaweb.com.br/blog/categoria/flask) 6 anos atrás ## [ Como herdar templates com Jinja2 ](https://www.treinaweb.com.br/blog/como-herdar-templates-com-jinja2) Veja neste artigo como herdar templates utilizando o Jinja2. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/plano-de-estudos-min-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 4 anos atrás ## [ Como montar um plano de estudos eficaz? ](https://www.treinaweb.com.br/blog/como-montar-um-plano-de-estudos-eficaz) Montar um plano de estudos para se tornar um desenvolvedor pode parecer complicado, ainda mais se você não sabe por onde começar. Mas, existem algumas etapas que podem te ajudar a criar um plano de estudos eficaz, que veremos neste artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/dicas-projetos-frontend-min-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ 5 ideias de projetos para praticar - front-end ](https://www.treinaweb.com.br/blog/5-ideias-de-projetos-para-praticar-front-end) Confira neste artigo algumas dicas de projetos de front-end, para que você possa praticar e melhorar suas habilidades. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/enviando-e-mails-no-asp-net-core-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Enviando e-mails no ASP.NET Core ](https://www.treinaweb.com.br/blog/enviando-e-mails-no-asp-net-core) O .NET possui um módulo nativo para o envio de e-mails. Entretanto, veja como facilitar este processo utilizando a biblioteca Coravel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/30133314/swagger-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 7 anos atrás ## [ Documentando uma API Spring Boot com o Swagger ](https://www.treinaweb.com.br/blog/documentando-uma-api-spring-boot-com-o-swagger) Porque documentar uma aplicação API Spring Boot com o Swagger? Quando se trabalha em equipe, uma má documentação pode dificultar (e muito) o trabalho dos demais desenvolvedores. Mas com o Swagger, via SpringFox, é possível documentar uma API Spring Boot com poucas linhas de código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde criar um projeto básico até autenticação. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **09h 46min 40s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58