Solucionado
Amigos, uma dúvida boba, no exercício 07 da aula 08, eu fiz tudo corretamente, mas a caixa do link "leia mais" nunca ia até o final do container principal.
Na resposta vi que meu erro era não ter utilizado o "display: block;".
Por que usando essa propriedade display o elemento foi até o final da caixa? Ele interpreta esse elemento como um elemento independente dentro do container principal? realmente não entendi bem essa parte.
hoje, com a Alura e o Google Gemini
Olá Ricardo,
Para entender isso, primeiro você precisa saber que existem diversos tipos de display para os elementos HTML.
A propriedade display é usada para especificar qual será o comportamento padrão daquele elemento na árvore de elementos HTML.
Já notou como determinados elementos se comportam de maneira diferente dependendo de onde são colocados?
Por exemplo, quando você coloca duas tag span lado a lado elas ficam realmente lado a lado (na tela) e quando você coloca duas divs lado a lado elas ficam uma em baixo da outra?
Faça o teste
<section>
<span>Elemento 01</span>
<span>Elemento 02</span>
</section>
<section>
<div>Elemento 01</div>
<div>Elemento 02</div>
</section>Quando você usa a propriedade display no CSS você está sobreescrevendo o comportamento padrão daquela tag. Não adianta eu colocar aqui como cada tag se comporta, é mais fácil você fazer uma pesquisa na internet que vai aprender mais sobre.
Deixo aqui 2 links para leitura https://developer.mozilla.org/en-US/docs/Web/CSS/display https://kilianvalkhof.com/2008/css-html/understanding-css-positioning-part-1
E também um pequeno snnipet que eu acabei de criar para você fazer seus testes durante o aprendizado.
HTMLElement.prototype.getDisplay = function() {
return getComputedStyle( this ).display;
};
// Exemplo de uso
document.querySelector('.seletor-para-seu-elemento').getDisplay()Isso retorna o display de um elemento..
Att.
Obrigado!