Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

form

nesse código:

<form>
                <label for="nome">Nome</label>
                <input type="text" id="nome">

                <label for="email">Email</label>
                <input type="text" id="email">

                <label for="telefone">Telefone</label>
                <input type="text" id="telefone">

                <input type="submit" value="Enviar">
            </form>

para colocar o display como block foi feito o seguinte:

form label {
    display: block;
}
form input {
    display: block;
}

Minha duvida é pq isso não funciona:

form {
    display: block;
}
1 resposta
solução!

Olá Cristiano, tudo certo?

quando um elemento está marcado com o 'display: block;', ele ocupa toda a 'linha' do navegador. Se o formulário está com o display block, o formulário ocupa todo o espaço da linha, mas o display do input e do label continuam o padrão, que é inline-block. Por isso a necessidade de especificar o display desta maneira:

form label {
    display: block;
}
form input {
    display: block;
}

Espero ter ajudado, bons estudos!

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