Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

MOTIVOS DO USO DO BORDER BOX NO PROJETO.

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Juliana Rodrigues Ferreira
| 13.8k xp | 35 posts

Conforme eu havia mandado na dúvida anterior sobre a diferença entre border box e content box, considerando o projeto do curso, porque então foi usado o border box?

lembrando que conforme foi dito, o border box se definia da seguinte forma: o tamanho total do elemento inclui a largura e a altura do conteúdo, juntamente com as bordas e o preenchimento interno. Isso significa que, ao definir a largura e a altura de um elemento, o preenchimento e as bordas não serão adicionados ao tamanho total. O conteúdo ficará dentro dessas bordas e preenchimento.

3 respostas
por Nícolas Felipe Ferreira Souza
| 2598.9k xp | 8231 posts
Instrutor Monitor de Fórum

Oi, Juliana! Tudo bem?

No caso do projeto do curso o "border-box" foi usado pois o objetivo é que o body tenha exatamente a altura que foi definida para ele (100vh), então, precisamos nos certificar de que a altura dos elementos dentro do body não afetaram isso e podemos nos certificar disso através desse atributo (border-box).

Espero ter ajudado. Fico à disposição para ajudar.

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Juliana Rodrigues Ferreira
| 13.8k xp | 35 posts

Boa tarde! Ainda não entendi muito bem, ainda tá meio confuso

solução!
por Nícolas Felipe Ferreira Souza
| 2598.9k xp | 8231 posts
Instrutor Monitor de Fórum

Olá, Juliana! Como vai?

Sinto muito por você não ter entendido bem anteriormente, vou tentar explicar de forma mais prática dessa vez. Veja:

Sem border-box:

HTML

<body>
    <div class="elemento-pai">
        <div class="elemento-filho">Texto de exemplo</div>
    </div>
</body>

CSS

.elemento-pai{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: grey;
    border: 2px solid black;
}

.elemento-filho{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: lightgray;
    padding-top: 0px;
}

RESULTADO

Imagem do resultado dos códigos HTML e CSS passados(sem padding no elemento filho)

Sem border-box adicionando padding:

HTML

<body>
    <div class="elemento-pai">
        <div class="elemento-filho">Texto de exemplo</div>
    </div>
</body>

CSS

.elemento-pai{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: grey;
    border: 2px solid black;
}

.elemento-filho{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: lightgray;
    padding-top: 50px;
}

RESULTADO Imagem do resultado dos códigos HTML e CSS passados (com padding no elemento filho)

Com border-box:

HTML

<body>
    <div class="elemento-pai">
        <div class="elemento-filho">Texto de exemplo</div>
    </div>
</body>

CSS

.elemento-pai{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: grey;
    border: 2px solid black;
}

.elemento-filho{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: lightgray;
    padding-top: 0px;
    box-sizing: border-box;
}

RESULTADO

Imagem do resultado dos códigos HTML e CSS passados(sem padding no elemento filho e com border-box)

Com border-box adicionando padding:

HTML

<body>
    <div class="elemento-pai">
        <div class="elemento-filho">Texto de exemplo</div>
    </div>
</body>

CSS

.elemento-pai{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: grey;
    border: 2px solid black;
}

.elemento-filho{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: lightgray;
    padding-top: 50px;
    box-sizing: border-box;
}

RESULTADO

Imagem do resultado dos códigos HTML e CSS passados (com padding no elemento filho e com border-box)

Repare que o resultado dos código sem padding é o mesmo tendo box-sizing: border-box; ou não. No entando, ao adicionar o padding, o código sem box-sizing: border-box tem o elemento-filho "vazando" o elemento-pai, sendo necessário adicionar box-sizing: border-box para resolver isso.

Espero ter ajudado. Fico à disposição para ajudar caso você tenha outras dúvidas.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!