Conhecendo o box model \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 06 Horas 54 Min 41 Seg Tempo restante da oferta: 06 54 41 [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) Conhecendo o box model [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Conhecendo o box model Domine os fundamentos do CSS com o box model. Aprenda a controlar o layout e o espaçamento dos elementos para uma página da Web. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/Conhecendo_o_box_model.jpg) O box model CSS é crucial para o desenvolvimento Web, porque é ele que controla a aparência dos elementos e sua posição. Além disso, conhecer o box model pode ajudar os desenvolvedores a corrigir problemas de layout rapidamente. Portanto, esse conceito é uma habilidade obrigatória para qualquer desenvolvedor. Além disso, é vital para criar um web design eficaz e eficiente. [ ![HTML5 + CSS3 - Box model e Posicionamento de Elementos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Box model e Posicionamento de Elementos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-box-model-e-posicionamento-de-elementos) ## O que é o box model O box model, ou, modelo de caixa CSS, é um conceito fundamental no desenvolvimento da Web que determina como os elementos em uma página da Web são dimensionados e posicionados. Para entender como os elementos são dimensionados e posicionados, precisamos entender os diferentes componentes do box model, largura, altura, preenchimento interno, bordas e margens. Cada componente desempenha um papel vital na criação do layout geral de uma página da web. ![Representação do box-model, com margem, borda, espaçamento interno e conteúdo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/representacao-box-model.png) ### Largura e altura do conteúdo A primeira etapa para dominar o modelo de caixa CSS é entender como definir a largura e a altura de um elemento. Usando as propriedades `width` e `height`, os desenvolvedores podem determinar o tamanho de um elemento. Por exemplo, definir o `width` de uma `div` para `200px` e o `height` para `100px` torna o elemento com 200 pixels de largura e 100 pixels de altura. Porém, é importante ter em mente que essas propriedades controlam apenas a área de conteúdo. Logo, elas não o tamanho total de um elemento. ### As bordas O segundo componente do modelo de caixa CSS são as bordas. Bordas são as linhas que cercam um elemento e podem ser definidas usando as propriedades CSS `border-width`, `border-style` e `border-color`. A propriedade `border-width` define a largura da borda. O `border-style` define o estilo da borda (como sólido, pontilhado ou tracejado). Já a propriedade `border-color` define a cor da borda. As bordas podem ser uma ótima maneira de adicionar interesse visual aos elementos e separá-los do plano de fundo da página da web. ### Preenchimento interno O terceiro componente do modelo de caixa CSS é o preenchimento interno. Esse preenchimento é o espaço entre o conteúdo de um elemento e sua borda. Ele pode ser definido usando as propriedades CSS `padding-top`, `padding-right`, `padding-bottom` e `padding-left`. Também pode ser definido usando a propriedade abreviada `padding`, que permite definir o preenchimento para todos os quatro lados de um elemento de uma só vez. Por exemplo, se definirmos o preenchimento de um elemento `div` para 20px, o conteúdo da `div` estará a 20 pixels de distância da borda em todos os quatro lados. O `padding` é uma ótima maneira de adicionar espaço entre o conteúdo e as bordas. [ ![HTML5 + CSS3 - Web design responsivo](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Web design responsivo Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-web-design-responsivo) ### Margens Por fim, são as margens. As margens criam espaço entre um elemento e os elementos ao seu redor. Podem ser definidos usando as propriedades CSS `margin-top`, `margin-right`, `margin-bottom` e `margin-left`.Assim como o `padding`, as margens também podem ser definidas usando a propriedade abreviada `margin`, para definir as margens para todos os quatro lados de um elemento de uma só vez. Por exemplo, se um desenvolvedor definir a margem de uma `div` para 20px, isso criará um espaço de 20 pixels entre a `div` e os elementos ao redor. As margens são uma maneira eficaz de criar espaço entre os elementos e controlar o layout geral de uma página da web. Entretanto, é preciso ter em mente que, para se manipular essas propriedades, é necessário ter conhecimento dos [Seletores básicos CSS](https://www.treinaweb.com.br/blog/seletores-basicos-do-css "Seletores básicos CSS"). Afinal, temos que saber como selecionar elementos do HTML e modifica-los no CSS. [ ![HTML5 + CSS3 - Propriedades e seletores avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Propriedades e seletores avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados) ### Veja como o boxmodel funciona na prática: ### Conclusão Portanto, o modelo de caixa CSS desempenha um papel crucial no desenvolvimento web e é obrigatório entendê-lo. Para dominar o box model, o desenvolvedor deve estar familiarizado com esses conceitos básicos abordados nesse artigo. Esses componentes trabalham juntos para criar o layout geral de uma página. Além disso, os desenvolvedores podem solucionar facilmente quaisquer problemas de layout que possam surgir. Caso queiro saber ainda mais como trabalhar com o box model o curso [HTML5 + CSS3 - Box model e Posicionamento de Elementos](https://www.treinaweb.com.br/curso/html5-css3-box-model-e-posicionamento-de-elementos "HTML5 + CSS3 - Box model e Posicionamento de Elementos") aborda tudo que você precisa saber com exemplos práticos. - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #css box model ](https://www.treinaweb.com.br/blog/tag/css-box-model) - [ #desenvolvimento web ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-web) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## 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/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/form-html5-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Trabalhando com formulários no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-formularios-no-html) No artigo de hoje, veremos um recurso muito utilizado pelos desenvolvedores front-end e presente no nosso dia a dia, formulários. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletores_avancados_do_css-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Seletores avançados do CSS ](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/organizando-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ ITCSS - Organizando melhor o CSS ](https://www.treinaweb.com.br/blog/itcss-organizando-melhor-o-css) Você já teve dificuldade com a organização e escalabilidade do seu CSS? Veja como a arquitetura ITCSS pode te ajudar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/criando-interfaces-graficas-no-c-com-gtk-400x280.png) [ C ](https://www.treinaweb.com.br/blog/categoria/c) 6 anos atrás ## [ Criando interfaces gráficas no C com GTK ](https://www.treinaweb.com.br/blog/criando-interfaces-graficas-no-c-com-gtk) Aplicações Desktop ainda são muito utilizadas. Neste artigo aprenda como utilizar o GTK para criar interfaces gráficas no C. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Conhecendo variáveis e constantes na Golang ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-na-golang) Conheça neste artigo os tipos de dados presentes e a sintaxe para que possamos declarar variáveis e constantes na Golang. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/como-instalar-o-csharp-e-nosso-primeiro-exemplo-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 4 anos atrás ## [ Conhecendo variáveis e constantes no C# ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-csharp) Conheça neste artigo os tipos de dados presentes no C# e a sintaxe para que possamos declarar variáveis e constantes. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/01/conhecendo-o-spring-data-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ Conhecendo o projeto Spring Data ](https://www.treinaweb.com.br/blog/conhecendo-o-projeto-spring-data) Nesse artigo vamos conhecer o projeto Spring Data, veremos qual o objetivo desse projeto e entender como o mesmo funciona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/conhecendo-o-gerenciador-de-pacotes-homebrew-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ Conhecendo o gerenciador de pacotes Homebrew ](https://www.treinaweb.com.br/blog/conhecendo-o-gerenciador-de-pacotes-homebrew) Neste artigo conheceremos o Gerenciador de Pacotes Homebrew. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/como-instalar-o-dart-e-executar-seu-primeiro-exemplo-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 6 anos atrás ## [ Conhecendo variáveis e constantes no Dart ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-dart) Neste artigo conheceremos as variáveis e constantes no Dart. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/conhecendo-o-gerenciador-de-pacotes-chocolatey-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ Conhecendo o Gerenciador de Pacotes Chocolatey ](https://www.treinaweb.com.br/blog/conhecendo-o-gerenciador-de-pacotes-chocolatey) Neste artigo conheceremos o Gerenciador de Pacotes Chocolatey. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/conhecendo_o_servidor_de_arquivos_samba-1-400x280.png) [ Rede de computadores ](https://www.treinaweb.com.br/blog/categoria/rede-de-computadores) 6 anos atrás ## [ Conhecendo o servidor de arquivos Samba ](https://www.treinaweb.com.br/blog/conhecendo-o-servidor-de-arquivos-samba) Veja neste artigo o que é o servidor de arquivos Samba. 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 **06h 54min 41s** - 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