How to increase the top margin of the element

Question

How to increase the top margin of the element

Asked 5 years, 9 months ago

Viewed 237 times

3

The problem I’m facing is to increase the upper margin between that title "Log in" of div main, I thought with a margin top I could do that, maybe I’m using it wrong, I tried, I tried but I couldn’t!

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>

2 answers

2

You’re having a problem known as Margin Collapse or Margin Collapsing. This "bug" has already been described and is well documented. You can find out more about this subject in this documentation by Mozilla itself. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/margin_collapsing

Father and first/last child

*If there is no border, padding, part inline, block formatting context created or free to separate the margin-top of a block of margin-top of your first block son, or no border, padding, contents inline, height, min-height, or max-height to separate the margin-bottom of a block of margin-bottom of his last son, then these banks collapse. The collapsed margin ends up outside the father.*

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

See in the example how it looks: I left commented in 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>

Browser other questions tagged html css front-end

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-09-22T21:26:58+00:00

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>