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

margin-top não funciona

Fiz conforme a resposta do exercício, mas o margin top não altera a margem superior dos legend, apenas do label mensagem. Printscreen e código abaixo:

legend.jpg

/* Legendas dos grupos de campo e do campo "Mensagem" em negrito e espaçadas do grupo de campos anterior. */
legend, label[for="mensagem"] {
    font-weight: bold;
    margin-top: 1em;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contato - João da Silva</title>
    <link rel="icon" href="imagens/favicon.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/contato.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>

    <!-- start main -->
    <main>

        <h1 class="titulo-principal">Contato</h1>

        <div class="container">

            <!-- start Form -->
            <form>

                <!-- start Inputs -->
                <fieldset>

                    <legend>Dados pessoais</legend>

                    <label for="nome">Nome</label>
                    <input autofocus id="nome" name="nome" type="text" placeholder="Seu nome aqui" pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres, e também pode conter espaço e apóstrofe.">

                    <label for="email">E-mail</label>
                    <input required type="email" id="email" name="e-mail" placeholder="exemplo@email.com">

                </fieldset>
                <!-- end Inputs -->


                <!-- start Selects -->
                <fieldset>

                    <legend>Assunto</legend>

                    <select name="select" id="select-assunto">
                        <option selected value="consultoria">Consultoria</option>
                        <option value="blog">Blog</option>
                        <option value="outro">Outro</option>
                    </select>

                </fieldset>
                <!-- end Selects -->


                <!-- start Mensagem -->
                <label for="mensagem">Mensagem</label>
                <textarea required name="mensagem" placeholder="Digite aqui sua mensagem" id="mensagem" cols="30" rows="10"></textarea>
                <!-- end Mensagem -->

                <!-- start Botão -->
                <button type="submit">Enviar <strong>para mim</strong></button>
                <!-- end Botão -->

            </form>
            <!-- end Form -->

        </div>

    </main>
    <!-- end main -->


    <img src="imagens/eu.jpg" alt="Minha foto" class="minha-foto">
    <aside class="navegacao-site">
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="bio.html">Sobre mim</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
        <ul class="icones-redes-sociais">
            <li>
                <a data-legenda="Clique em mim =)" href="https://github.com/joaodasilva" class="github">
                    Github
                </a>
            </li>
            <li>
                <a data-legenda="Clique em mim =)" href="https://twitter.com/joaodasilva" class="twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a data-legenda="Clique em mim =)" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">
                    LinkedIn
                </a>
            </li>
        </ul>
    </aside>
    <footer class="rodape-pagina">
        &copy; João da Silva 2014
    </footer>
</body>
</html>
10 respostas

Oi Roger, como o label é um elemento inline, as regras de margin que ele aceita receber são apenas na linha horizontal, para a vertical, você precisa usar algo diferente como inline-block.

Verifica isso pra gente?

Tentei inserir display: inline-block; mas não alterou o comportamento dos elementos.

Só consegui alterar com o padding-top, que é diferente do que está na resposta do exercício. Ou a resposta está errada, ou há alguma propriedade errada em meu código (acima) que não estou identificando.

Roger, coloca toda a pasta do projeto em um arquivo zip e compartilha comigo de alguma forma? Algo como o we transfer pra mim baixar aqui e analisar de pertinho o que está acontecendo? Pode ser um repo no github tabém, qualquer forma. Eu quero ver os outros css da página que estão carregados.

Outra pergunta, você está usando qual navegador? Windows ou Linux? Que versões?

Olá Wanderson.

https://github.com/Roger-Melo/curso_html5_e_css3_2_turbinando_as_suas_paginas

Estou usando a versão mais recente do Chrome. O margin-top dos legend só funciona no firefox.

Meu sistema é um Windows 10 pro.

Oi Roger, testei aqui e funcionou normal, estou usando chrome também no Linux. Mas assim, pelo que vi ali, tá funcionando, o problema talvez seja os outros elementos que não obedeçam a regra. Pra ficar mais visível se funcionou ou não, experimenta colocar um valor grande tipo 5em.

label[for="mensagem"] {
    font-weight: bold;
    margin-top: 5em;
}

label[for] {
    display: block;
    margin-top: 5em;
}

Esse é o mesmo css do contato.css que você tem, apenas o valor do margin que mudei. olha como ficou:

Olá Wanderson.

Eu alterei aqui e o resultado ficou como o seu sim, mas ainda continua diferente do que o 1º tópico do exercício pede:

"As legendas dos grupos de campo e do campo "Mensagem" devem estar em negrito e espaçadas do grupo de campos anterior."

Ou seja, o legend "assunto" deveria ter uma margem superior com o margin top, mas a propriedade não está alterando isso. Só altera se eu aplicar um padding-top, que é diferente da resposta do exercício.

Olha como fica com o margin-top:

margin.jpg

Agora com o padding:

padding.jpg

solução!

Roger, o legend também está com margem, o elemento de cima é que não está sendo empurrando, vê essa parte laranja pra cima do legend? essa é a margem, mas por algum motivo o elemento de cima não está respeitando isso. Motivo? Ainda não sei.

Agora, para espaçar os grupos um do outro, você pode aplicar margem superior direto no fieldset, que acho que seja até a prática mais comum.

Olá Anderson.

É exatamente isso, o elemento está com o margin top, mas o elemento acima dele não respeita esse margin top.

Obrigado pela dica dos espaçamentos nos grupos. Vc acha que seria legal uma revisão e atualização da resposta desse exercício?

Não só desse exercício em si Roger, a gente tem uma série de revisões para fazer referente as sugestões que os alunos mandam, a gente tá sempre trabalhando nisso, a vez desse curso e exercícios vão chegar.

Você também pode ajudar a identificar problemas submetendo sugestões de correção que a gente avalia sempre.

Valeu!