How to increase the top margin of the element

Question

How to increase the top margin of the element

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

The problem I'm facing is raising the top margin between this "Login" title of the main div, I thought with a margin-top in> I could do this, maybe I'm misusing it, tried it, tried it but I could not!

body {
    background-color: hsla(0,0%,78%,.75);
    font-family: tahoma, Arial;
    margin: 0px;
    padding: 0px;
}
.login {
    background-color: #FFF;
    color: #5e5e5e;
    width: 320px;
    height: 450px;
    margin: auto;
    border-radius: 5px;
}

#title-login {
    font-size: 1.5em;
    color: #5e5e5e;
    margin: auto;
    background-color: #FFF;
    width: 300px;
    margin-top: 50px;
    margin-bottom: 10px;
    padding-left: 20px;
    border-radius: 5px;
}

h1 {
    margin: auto;
    width: 290px;
    text-align: center;
    margin-bottom: 10px;
}

p {
    margin: auto;
    margin-top: 25px;
    width: 290px;
    text-align: center;
}

.fieldFormValidation {
    margin: auto;
    margin-top: 30px;
    width: 290px;
    height: 232px;
}

.validation {
    margin: auto;
    padding-left: 10px;
    border: 1px solid #cacac9;
    width: 278px;
    height: 45px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: .875rem;
}

.btn-submit {
    width: 290px;
    color: #FFF;
    background-color: #54cf8b; 
    border: 1px solid #54cf8b;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-submit:hover {
    box-shadow: 0px 5px 10px #333;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    transition-delay: 0.1s;
}

.savePwd-and-recoveryPwd {
    margin-top: 14px;
    width: 290px;
    height: 30px;
    background-color: #999;
    display: flex;
}

.div-rememberLogin {
    width: 145px;
    display: block;
    float: left;
    font-size: .875rem;
    line-height: 30px;
}

.div-recoveryPwd {
    width: 145px;
    display: block;
    float: right;
    font-size: .875rem;
    line-height: 30px;
    text-align: right;
}

hr {
    width: 290px;
    margin-top: 30px;
    margin-bottom: 10px;
}

h6 {
    width: 290px;
    margin: auto;
    text-align: right;
    font-family: helvetica;
    font-size: 0.75em;
}

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Login</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css"  href="_css/login.css"/>
    </head>
    <body>
        <h1 id="title-login">Nome vai aqui</h1>
        <div class="login">
            <h1>Fazer Login</h1>
            
            <p>Não possui uma conta? <a href="#">Registre-se</a></p>
            
            <form id="registerForm" name="registerForm" class="fieldFormValidation" action="page.php" method="post">
                <input type="email" name="email" required autofocus class="validation" placeholder="Digite seu e-mail" autocomplete="on"/> 
            
                <input type="password" name="senha" placeholder="Informe sua senha" required class="validation" minlength="8" maxlength="16"/> <br>
            
                <input type="submit" class="validation btn-submit" name="btn-enviar" value="FAZER LOGIN">
                
                <div class="savePwd-and-recoveryPwd">
                    <div class="div-rememberLogin">
                        <input id="remember" type="checkbox" class="tw-checkbox" name="remember">
                        <label for="remember" class="tw-checkbox-label small">Lembrar-me</label>
                    </div>
                    
                    <div class="div-recoveryPwd">
                        <a href="recuperar-senha.php">Esqueci a senha</a>
                    </div>
                </div>
            </form>
            
            <hr>
            <h6>feito por <a href="#">fulano de tal...</a></h6>
        </div>
    </body>
</html>

html css front-end

asked by anonymous 22.09.2018 / 23:08

2 answers

Changing the color of the td without updating the page with ajax Find position in an array through the position in the array?

score 1 · Answer 1

You can create a style for this h1 using:

.login h1{
   display: inline-block;
   width: 100%;
   margin-top: 20px;
}

body {
    background-color: hsla(0,0%,78%,.75);
    font-family: tahoma, Arial;
    margin: 0px;
    padding: 0px;
}

.login {
    background-color: #FFF;
    color: #5e5e5e;
    width: 320px;
    height: 450px;
    margin: auto;
    border-radius: 5px;
}

#title-login {
    font-size: 1.5em;
    color: #5e5e5e;
    margin: auto;
    background-color: #FFF;
    width: 300px;
    margin-top: 50px;
    margin-bottom: 10px;
    padding-left: 20px;
    border-radius: 5px;
}

h1 {
    margin: auto;
    width: 290px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 50px;
}

.login h1{
   display: inline-block;
   width: 100%;
   margin-top: 20px;
}

p {
    margin: auto;
    margin-top: 25px;
    width: 290px;
    text-align: center;
}

.fieldFormValidation {
    margin: auto;
    margin-top: 30px;
    width: 290px;
    height: 232px;
}

.validation {
    margin: auto;
    padding-left: 10px;
    border: 1px solid #cacac9;
    width: 278px;
    height: 45px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: .875rem;
}

.btn-submit {
    width: 290px;
    color: #FFF;
    background-color: #54cf8b; 
    border: 1px solid #54cf8b;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-submit:hover {
    box-shadow: 0px 5px 10px #333;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    transition-delay: 0.1s;
}

.savePwd-and-recoveryPwd {
    margin-top: 14px;
    width: 290px;
    height: 30px;
    background-color: #999;
    display: flex;
}

.div-rememberLogin {
    width: 145px;
    display: block;
    float: left;
    font-size: .875rem;
    line-height: 30px;
}

.div-recoveryPwd {
    width: 145px;
    display: block;
    float: right;
    font-size: .875rem;
    line-height: 30px;
    text-align: right;
}

hr {
    width: 290px;
    margin-top: 30px;
    margin-bottom: 10px;
}

h6 {
    width: 290px;
    margin: auto;
    text-align: right;
    font-family: helvetica;
    font-size: 0.75em;
}

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Login</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css"  href="_css/login.css"/>
    </head>
    <body>
        <h1 id="title-login">Nome vai aqui</h1>
        <div class="login">
            <h1>Fazer Login</h1>
            
            <p>Não possui uma conta? <a href="#">Registre-se</a></p>
            
            <form id="registerForm" name="registerForm" class="fieldFormValidation" action="page.php" method="post">
                <input type="email" name="email" required autofocus class="validation" placeholder="Digite seu e-mail" autocomplete="on"/> 
            
                <input type="password" name="senha" placeholder="Informe sua senha" required class="validation" minlength="8" maxlength="16"/> <br>
            
                <input type="submit" class="validation btn-submit" name="btn-enviar" value="FAZER LOGIN">
                
                <div class="savePwd-and-recoveryPwd">
                    <div class="div-rememberLogin">
                        <input id="remember" type="checkbox" class="tw-checkbox" name="remember">
                        <label for="remember" class="tw-checkbox-label small">Lembrar-me</label>
                    </div>
                    
                    <div class="div-recoveryPwd">
                        <a href="recuperar-senha.php">Esqueci a senha</a>
                    </div>
                </div>
            </form>
            
            <hr>
            <h6>feito por <a href="#">fulano de tal...</a></h6>
        </div>
    </body>
</html>

score 1 · Answer 2

You're having a problem known as Margin Collapsing or Margin Collapsing . This bug has already been described and is well documented. You can learn more about this in this documentation from Mozilla itself. link

Father and first / last child

* If there is no border , padding , inline , block formatting context created or free to separate margin-top from a block of margin-top from its first block border , content padding , inline , height , or min-height to separate the max-height of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends outside the parent. *

One of the ways to solve this without needing to change the type of margin-bottom in display is putting a H1 of 1px in your padding-top That way there will be a "limiter" of height in the container , and the div .login of your margin-top works again!

See in the example how it is: I have commented in the CSS what I changed

body {
    background-color: hsla(0,0%,78%,.75);
    font-family: tahoma, Arial;
    margin: 0px;
    padding: 0px;
}
.login {
    background-color: #FFF;
    color: #5e5e5e;
    width: 320px;
    height: 450px;
    margin: auto;
    border-radius: 5px;
    padding-top: 1px; /* padding para a margen não buggar */
}

#title-login {
    font-size: 1.5em;
    color: #5e5e5e;
    margin: auto;
    background-color: #FFF;
    width: 300px;
    margin-top: 50px;
    margin-bottom: 10px;
    padding-left: 20px;
    border-radius: 5px;
}

h1 {
    margin: auto;
    width: 290px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px; /* agora a margen funciona */
}

p {
    margin: auto;
    margin-top: 25px;
    width: 290px;
    text-align: center;
}

.fieldFormValidation {
    margin: auto;
    margin-top: 30px;
    width: 290px;
    height: 232px;
}

.validation {
    margin: auto;
    padding-left: 10px;
    border: 1px solid #cacac9;
    width: 278px;
    height: 45px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: .875rem;
}

.btn-submit {
    width: 290px;
    color: #FFF;
    background-color: #54cf8b; 
    border: 1px solid #54cf8b;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-submit:hover {
    box-shadow: 0px 5px 10px #333;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    transition-delay: 0.1s;
}

.savePwd-and-recoveryPwd {
    margin-top: 14px;
    width: 290px;
    height: 30px;
    background-color: #999;
    display: flex;
}

.div-rememberLogin {
    width: 145px;
    display: block;
    float: left;
    font-size: .875rem;
    line-height: 30px;
}

.div-recoveryPwd {
    width: 145px;
    display: block;
    float: right;
    font-size: .875rem;
    line-height: 30px;
    text-align: right;
}

hr {
    width: 290px;
    margin-top: 30px;
    margin-bottom: 10px;
}

h6 {
    width: 290px;
    margin: auto;
    text-align: right;
    font-family: helvetica;
    font-size: 0.75em;
}

<h1 id="title-login">Nome vai aqui</h1>
<div class="login">
    <h1>Fazer Login</h1>

    <p>Não possui uma conta? <a href="#">Registre-se</a></p>

    <form id="registerForm" name="registerForm" class="fieldFormValidation" action="page.php" method="post">
        <input type="email" name="email" required autofocus class="validation" placeholder="Digite seu e-mail" autocomplete="on"/> 

        <input type="password" name="senha" placeholder="Informe sua senha" required class="validation" minlength="8" maxlength="16"/> <br>

        <input type="submit" class="validation btn-submit" name="btn-enviar" value="FAZER LOGIN">

        <div class="savePwd-and-recoveryPwd">
            <div class="div-rememberLogin">
                <input id="remember" type="checkbox" class="tw-checkbox" name="remember">
                <label for="remember" class="tw-checkbox-label small">Lembrar-me</label>
            </div>

            <div class="div-recoveryPwd">
                <a href="recuperar-senha.php">Esqueci a senha</a>
            </div>
        </div>
    </form>

    <hr>
    <h6>feito por <a href="#">fulano de tal...</a></h6>
</div>