Dúvida no campo de e-mail | HTML e CSS: responsividade com mobile-first

2
respostas

por Rayane Costa

| 40.5k xp | 12 posts

Olá, boa noite! Alguém sabe me explicar porque na section banner (1ª seção da página), a caixinha de pesquisa fica dentro do padding estabelecido, com width: 100% e na section contato (última seção da página) a caixinha do e-mail ultrapassa o padding estabelecido se colocar width: 100% ??

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

<section class="banner">
            <h2 class="banner__titulo">Já sabe por onde começar?</h2>
            <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
            <input type="search" id="banner" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
            <label for="banner"></label>
        </section>

.banner__pesquisa {
    width: 100%;
    background-color: var(--fundo-botao);
    border: 1px solid var(--cor-do-cabecalho);
    border-radius: 24px;
    color: var(--cor-do-cabecalho);
    padding: 1em 1.5em;
}

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

<section class="contato">
            <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
            <p class="contato__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
            <input type="email" id="contato" class="contato__email" placeholder="Cadastre seu e-mail">
            <label for="contato"></label>
        </section>

.contato__email {
    width: 100%;
    background-color: var(--fundo-botao);
    border: 1px solid var(--cor-azul);
    border-radius: 24px;
    color: var(--cor-azul);
    padding: 1em 1.5em;
    text-align: center;
}

2 respostas

por Gabriel dos Santos da Rocha

| 39.7k xp | 15 posts

Técnico de TI

08/02/2023

A diferença entre as duas seções é que a classe .banner__pesquisa tem o atributo padding definido como 1em 1.5em, enquanto a classe .contato__email tem o atributo padding definido como 1em 1.5em.

O padding é usado para especificar a quantidade de espaço entre o conteúdo de um elemento e suas bordas. Quando você especifica o width: 100%, está dizendo que a largura do elemento deve ser igual a 100% da largura de seu elemento pai.

No entanto, o padding é adicionado ao width de um elemento, o que significa que o tamanho real do elemento será maior que o tamanho especificado em width. Isso pode resultar em um elemento que ultrapassa o tamanho de seu elemento pai, como você descreveu na seção de contato.

Em resumo, o elemento .contato__email ultrapassa o tamanho estabelecido pelo padding porque seu width é igual a 100% da largura de seu elemento pai, incluindo o padding.

Espero ter ajudado, abraço! Bons Estudos.

por Rayane Costa

| 40.5k xp | 12 posts

15/02/2023

Fala, Gabriel! Tudo bem? Então, estava tentando descobrir o problema e descobri! O que acontece aqui é que é aplicado um padding automático user agent quando o input é do tipo search e não acontece isso quando o tipo é email. Aí consegui resolver aplicando a propriedade box-sizing: border-box no input search.

padding user agent aplicado

.contato .contato__email {
    box-sizing: border-box;
}

Obrigada pela ajuda!