Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Box-sizing com min-height

Na aula o professor colocou na classe .produto tanto o "box-sizing: border-box" como também o "min-height:12.5rem".

.protuto {
    margin-bottom: 1rem; 

    padding-top: 2rem; 
    padding-bottom: 2 rem; 
    padding-left: 50%; 

    position: relative; 

    overflow: hidden;

    background-color: var(--branco); 

    box-shadow: 10px 10px 30px var(--preto-transparente); 

    box-sizing: border-box;

    min-height: 12.5rem;
}

Quando é colocado "min-height;12rem", o cartão poderá ser maior do que o tamanho informado na propriedade, certo? O box-sizing mantém tamanho do elemento em que ele está sendo aplicado e ele não permite que ele aumente, certo?

Se o "min-height" permite que ele seja maior do que os 12.5rem, qual será a função do box-sizing?

Desde já agradeço a atenção. Sucesso na sua jornada!!

2 respostas
solução!

Fala Diógenes, beleza?!

A função do "box-sizing: border-box" é fazer com que as propriedades "padding" e "border" não se somem ao tamanho do elemento. Caso o "box-sizing: border-box" não tivesse sido aplicado, a altura mínima definida seria, na verdade, 12.5rem + 2rem de "padding-top" + 2rem de "padding-bottom", ou seja, 16.5rem.

Espero ter ajudado.

Bons estudos!

Entendi.

É, temos que praticar bastante para entender os comportamentos dos elementos com diversos atributos sendo aplicados neles.

Desde já agradeço a sua atenção!

Grato!