Questão FC373523
A largura do contêiner <div> definida no fragmento CSS3 abaixo é de 360px, pois o padding adiciona 30px de margem interna à esquerda e 30px à direita. div { width: 300px; padding:
Desenvolvimento Web
FCC · 2018
A largura do contêiner <div> definida no fragmento CSS3 abaixo é de 360px, pois o padding adiciona 30px de margem interna à esquerda e 30px à direita.
div {
width: 300px;
padding: 30px;
}
Para que o valor definido no padding não seja acrescentado aos 300px de largura do contêiner <div>, deve-se incluir no fragmento de código a instrução
- weight-width: fixed;
- max-width:300px;
- width-dimension: fixed;
- box-sizing: border-box;
- padding-render: none;
Mostrar resposta e comentário
Gabarito
D
Comentário do professor
box-sizing: border-box; instrui o navegador a calcular a propriedade width incluindo o padding e a borda no tamanho total do elemento, ou seja, a dimensão definida passa a abranger conteúdo + padding + borda.
Por padrão o navegador usa content-box, onde a width refere-se apenas ao conteúdo. No box model geral:
\(largura\ total = conteúdo + padding + borda + margem\).
No exemplo: com width: 300px e padding: 30px (esquerda + direita), se permanecer em content-box a largura final será \(300 + 30 + 30 = 360\) px. Ao aplicar box-sizing: border-box;, a largura total fixa em \(300\) px, e o espaço disponível para o conteúdo reduz para \(300 - 30 - 30 = 240\) px.
Essa propriedade é útil em layouts responsivos para evitar que padding/bordas aumentem a caixa além do valor definido, facilitando cálculos e alinhamentos.
Conteúdo do catálogo FC Concursos · Atualizado em