5

Código:

div {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  padding: 50px;
}
<div>
  Contéudo da div.
</div>

  • Gostaria de entender porque ao inspecionar a div que está no código pelo browser ela está com height:202px e widht:402px e não width:300px; e height:100px;?
  • Caso eu queira manter os valores de width:300px; e height:100px;o que devo fazer?

Vejam:

inserir a descrição da imagem aqui

6
  • Seria uma div interna? Há algum outro elemento? Commented 6/04/2017 às 18:47
  • Lembra-te que padding adiciona espaçamento interno ao elemento, enquanto margim externo. Ambos mantém as dimensões definidas por width e height e adicionam o espaçamento. Se utilizar margim e inspecionar, verás que as dimensões serão mantidas.
    – Woss
    Commented 6/04/2017 às 18:58
  • @AndersonCarlosWoss Entendo sobre, aliás tenho até uma pergunta aqui sobre seu questionamento :)
    – Marconi
    Commented 6/04/2017 às 19:01
  • Então não sei se entendi esta pergunta. Você quer que o valor definido em padding seja subtraído do width e height? Se for isso, será necessário fazer manualmente, definindo width: 200px, pois com o padding: 50px, o total será de 300px.
    – Woss
    Commented 6/04/2017 às 19:04
  • @AndersonCarlosWoss vou editar, talvez eu não esteja me expressando bem.
    – Marconi
    Commented 6/04/2017 às 19:05

5 Respostas 5

3
+50

Você ta acrescentando 50px de padding em todos os lados do elemento, logo você está somando isso com o tamanho já definido no width e no heightmais as bordas de 1px. Para contornar esse problema com o padding você pode usar a propriedade box-sizing:border-box

div {
   width:300px;
   height:100px;
   border:1px solid red;
   padding:50px;
   box-sizing:border-box;
}

Dessa forma seu elemento vai manter o padding porém interno e não vai aumentar o tamanho definido do seu elemento

0
2

Porque ao inspecionar a div que está no código pelo browser ela está com height:202px e widht:402px e não width:300px; e height:100px;?

Isso ocorre por causa do modelo padrão de cálculo de áreas, chamado box sizing, que é aditivo - ou seja, o tamanho final é a soma de dimensões + padding + border + margin:

inserir a descrição da imagem aqui

Caso eu queira manter os valores de width:300px; e height:100px; o que devo fazer?

Você precisa alterar o modelo para border-box, o que forçará o recálculo da área interna do elemento descontando tanto o padding quando o border. Exemplo abaixo:

inserir a descrição da imagem aqui

div {
width:300px;
height:100px;
border:1px solid red;
padding:50px;
box-sizing: border-box;
}
<div>
Contéudo da div.
</div>

4
  • 1
    Sensacional, postei a pergunta porque acho que muita gente desconhece @OnoSendai. Estou pensando em até oferecer uma recompensa aqui, pois não acho que a pergunta foi bem vista, acho que devo melhorar o titulo pra tornar mais abrangente? :)
    – Marconi
    Commented 7/04/2017 às 14:41
  • 1
    Sempre um prazer @Marconi! 'Elemento com tamanho final diferente da definição de width e height no CSS' ou algo similar, que mencione os conceitos que o corpo da sua pergunta exibe, talvez torne mais claro o seu objetivo.
    – OnoSendai
    Commented 7/04/2017 às 14:45
  • Obrigado por ajudar no titulo, estava sem saber o que colocar pra tornar mais abrangente. Vou oferecer uma recompensa nessa pergunta assim que possível. :)
    – Marconi
    Commented 7/04/2017 às 14:47
  • 1
    Excelente! +1 @OnoSendai Commented 11/04/2017 às 19:01
2

O aumento de tamanho de qualquer elemento em uma página WEB se deve a utilização do padding, o padding nada mais é que o espaço interno do elemento, ou seja, quando se aplica um padding de 50px, o elemento sofrerá um aumento de 50px para top, rigth, bottom e left.

Existem dois modos de manter a proporção do elemento ao adicionar um padding, estarei citando-os abaixo:

Primeiro

Escolher um valor final para minha div 300px por 100px definindo o espaçamento interno, levando em consideração que o espaçamento aumentará em todos os lados o elemento principal, ou seja, se o elemento possuir 300 de largura, logo ele valerá 400, pois 50 de topo e 50 de direita base 400, o mesmo é valido para a altura, então devemos subtrair 50 do valor que desejamos, neste caso queremos uma div com 300px e 100px, ficará assim.

div.d1 {
    width: 200px;
    height: 0px;
    /*É necessário por o height como 0px, pois se deixa vazio, ele assumirá um valor automático, e estragará o trabalho, eu deixei 0px 
 pois ele assume 50 de padding, o que já soma 100px da original*/
    
    padding: 50px;
    border: 1px solid black;
}
div.d2 {
    width: 300px;
    height: 100px;
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid red;
}
<div class="d1">Ajsutando manualmente.</div>
<br>
<div class="d2"> Com Border-Box </div>
<br>
    

Segundo

box-sizing: border-box;a qual é um estilo aplicado aos elementos, mantendo a proporção original de cada um, assim não reajustando o seu tamanho com o padding.

Observação: Vale ressaltar que o border: 1px solid black, consome 1px de cada lado do elemento, ou seja, o width passa a ser 302px;

3
  • Félix, suas divs não condizem com o que diz.
    – Marconi
    Commented 7/04/2017 às 10:46
  • @Marconi - Confira agora
    – Félix
    Commented 7/04/2017 às 14:26
  • Era isso mesmo @Félix. Valeu pelos ajuste :)
    – Marconi
    Commented 7/04/2017 às 14:54
2

As propriedades width e height definem as dimensões da área de conteúdo do boxes criado pelos elementos HTML. As dimensões finais do box (largura x altura) são o resultado da soma dos valores das propriedades width, padding e border. Sendo assim, no seu exemplo o tamanho da div é resultado de:

height = 100 + 50(padding-top) + 50(padding-bottom) + 1(border-top) + 1(border-bottom) = 202

width= 300 + 50(padding-left) + 50(padding-right) + 1(border-left) + 1(border-right) = 402

A propriedade box-sizing altera a forma como o Box Model é calculado, incorporando os valores de padding e border à largura do box criado pelo elemento HTML. Assim você não precisa fazer cálculos para chegar às dimensões da largura e altura total do box, pois elas são exatamente aquelas que você declarou na sua regra CSS.

div {
width:300px;
height:100px;
border:1px solid red;
padding:50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div>
Contéudo da div.
</div>

3
  • E se eu quiser ela com os tamanhos que defini no CSS?
    – Marconi
    Commented 6/04/2017 às 18:58
  • Jessica, complementa sua resposta por favor ela está correta porém faltando.
    – Marconi
    Commented 7/04/2017 às 14:45
  • 1
    Editei a resposta, espero que tenha ficado mais claro.
    – Jessika
    Commented 7/04/2017 às 15:34
1

Você pode utilizar a propriedade border-box do CSS, como abaixo:

div {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  padding: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<div>
  Contéudo da div.
</div>

Ela fará com que as dimensões do elemento sejam mantidas mesmo quando utilizadas outras propriedades que alterariam seu tamanho, como padding e border. Obviamente que isso é válido para width apenas, pois height se ajustará conforme o conteúdo.

Sem a utilização da mesma, o navegador manterá a área útil (não sei se tem um termo mais técnico) com as dimensões que você definiu e qualquer propriedade utilizada que varie o tamanho do elemento será acrescentado às dimenções do mesmo. Isto é, a área útil do elemento será 300x100, acrescentando 2 pixels em cada por causa da borda (302x102) e, finalmente, mais 100px em cada por causa do padding, totalizando 402x202, que são os valores inspecionados.

1
  • Era nisso que queria chegar @Anderson, você acha que a pergunta ainda está complicada de entender? Tem algo que possa melhorar? Eu desconhecia que funcionava assim, por isso decidir perguntar. Aliás até achei super interessante.
    – Marconi
    Commented 6/04/2017 às 19:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .