3
respostas

[Dúvida] BOX SIZING: BORDER-BOX

Boa noite!

Confesso que, às vezes, o CSS parece fácil de ler. Mas aparece certas situações que nada faz sentido, e fico sem entender como a magia aconteceu.

No começo do projeto, a professora fez o reset.css considerando box-sizing: border-box. Porém, ao configurar o card, ela aplicou novamente o box-sizing para esa classe.

Não surpreso, notei que fez total diferença na exibição dos elementos.

Portanto, por que o class="card" não herdou o box-sizing do reset.css e por que foi necessário informar novamente essa configuração?

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
3 respostas

Olá Tiago, tudo bem ? Testei aqui pelo especionador e me parece que o box-sizing do CSS Global está sendo obedecido sim.

Como pode ver na imagem o box-sizing do global.css está sendo usado (Seta vermelha) e o outro box-sizing (Seta Verde) "não está servindo" nesse caso. Acredito que a instrutora só adicionou ele como forma de reforçar que deve ser border-box

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Boa noite! Obrigado pela resposta.

Se acessarmos o body, consta o box-sizing: border-box conforme o reset.css.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Porém, se não aplicarmos novamente no .card, a formatação fica diferente.

Sem box-sizing:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Com box-sizing:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Não fica muito claro nas imagens, mas é possível notar a proximidade do com o bottom do Card.

Opa Tiago, tudo bem ?

Fui infeliz na minha colocação rsrs

A professora adicionou o border-box somente para algumas tags e a tag article não é uma delas. Normalmente vejo Devs adicionando para tudo dessa forma * { box-sizing: border-box; }

/* CSS RESET DA PROFESORA */
body,
img,
h1,
p,
fieldset,
legend,
label,
input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}