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

Espacinho aparece em baixo de todas as imagens.

Minhas imagens sempre aparecem com um espacinho entre eles e o item seguinte, ou entre elas e o fim da

delas. Estou usando o reset que peguei no curso de css aqui do alura. Alguém sabem como tirar ele e deixar a img rente ao final do seu container?

https://photos.app.goo.gl/tT2rymmlyLrUaF4n1

        <section id="notebook-section">
                    <div id="notebook-img-box">
                        <img src="img/note_img.png" id="notebook-img"  >
                    </div>
            </section>

#notebook-section{
    background-color: #d6d6d6;
}
#notebook-container{
    width: 60%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
3 respostas

Oi Marlon, tudo bem?

Nao consegui pegar os arquivos do curso dessa parte, mas nao tem problema.

Joguei seu exemplo de codigo nesse Jsbin e mesmo sem reset nao ficou com esse pixel em baixo.

Recomendo usar o insepect element na imagem e no fundo, até achar de onde vem esse pixel a mais. Talvez seja um padding, uma margin, ou até a height da div.

Outra coisa que da pra fazer é mandar uma altura máxima de 100% nas imagens, como é só um pixel não vai distorcer a ponto de alguem notar.

Espero ter ajudado e bons estudos,

Abcs!

solução!

Olá, depois de revirar o código resolvi o problema tirando o "<!DOCTYPE html>" do topo do .html, o que me deixou bem curioso do pq desse comportamento.

Oi Marlon,

Estranho mesmo!

O doctype é para informar o browser qual HTML que será lido a partir dali (xhtml, html5, etc).

Talvez algum elemento que não está fechando devidamente, mas de qualquer forma que bom que resolveu!

Abcs!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software