Div Tag Margin funktioniert nicht

Entwerfen der Facebook-Login-Seite für die Praxis nur mit HTML und CSS.Aber hier habe ich ein Problem. Ich weiß nicht, was es ist.Hier möchte ich den oberen Rand der Klasse "LoginArea "aber kann es nicht tun. So das Facebook-Logo ist okey aber der Login-Bereich ist völlig anders als die echte Facebook-Seite.Div Tag Margin funktioniert nicht

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
} 
 

 
.logoArea { 
 
    height: 35px; 
 
    width: 100px; 
 
    background: url(media/6cVHHozUQSt.png) no-repeat; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    margin: 40px 40px 0 200px; 
 
} 
 

 
.mainArea { 
 
    max-width: 1600px; 
 
    margin: auto; 
 
} 
 

 
header.mainHeader:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
header.mainHeader { 
 
    background: #3a5797; 
 
    padding: 10px 0; 
 
    color: #fff; 
 
} 
 

 
.mainHeader .logoArea { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.mainHeader .loginArea { 
 
    float: right; 
 
    width: 50%; 
 
} 
 

 
.loginArea .userName, 
 
.loginArea .password { 
 
    width: 40%; 
 
    float: left; 
 
} 
 

 
.loginArea input[type="text"], 
 
.loginArea input[type="password"] { 
 
    width: 60%; 
 
    padding: 2px; 
 
    border-width: 1px; 
 
    border-color: #29487d; 
 
    margin-bottom: 5px; 
 
} 
 

 
.loginArea .submitButton { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
.loginArea label { 
 
    font-size: 12px; 
 
} 
 

 
label[for="keepLogin"], 
 
.loginArea a { 
 
    font-size: 12px; 
 
    color: #9CABC6; 
 
} 
 

 
#keepLogin { 
 
    margin: 0; 
 
} 
 

 
.submitButton input { 
 
    background: #3B5998; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    margin-top: 20px; 
 
    border-width: 1px; 
 
    border-color: #29487d; 
 
    padding: 5px; 
 
}

<!DOCTYPE HTML> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Facebook- Log In or Sign Up</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css" media="all" /> 
 
</head> 
 

 
<body> 
 
    <header class="mainHeader"> 
 
    <div class="mainArea"> 
 
     <div class="logoArea"> 
 
     <img id="logo" src="media/6cVHHozUQSt.png" alt="" /> 
 
     </div> 
 
     <div class="loginArea"> 
 
     <form action="#"> 
 
      <div class="userName"> 
 
      <label for="user">Email or Phone </label> <br/> 
 
      <input type="text" id="user" /><br/> 
 
      <input type="checkbox" id="keepLogin" /> 
 
      <label for="keepLogin"> Keep me Logged In</label> 
 
      </div> 
 
      <div class="password"> 
 
      <label for="password">Password </label><br/> 
 
      <input type="password" id="password" /><br/> 
 
      <a href="#">Forgotten you password?</a> 
 
      </div> 
 
      <div class="submitButton"> 
 
      <input type="submit" value="Log In" /> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

Quelle

2017-03-20 Imrul Kayes

In .loginArea Klasse oberen Rand auf 0 wie diese reduzieren. Hoffe das hilft dir.

margin: 0 40px 0 200px;

Quelle

2017-03-20 16:21:23

entfernen die width oder margin von .mainHeader .logoArea (oder verringern), ist es nicht blockiert also nicht zu viel Raum.

bewusst sein, stets, dass der Raum ein Element ist tatsächlich verwendet height/width + padding + margin + border, so in Ihrem Fall die tatsächliche Breite ist das Element 50% plus 240px für die Ränder nimmt.

Quelle

2017-03-20 16:21:57 Daniel

mein Problem war die Höhe über dem Login-Bereich. Nicht die Breite. Ich möchte die Höhe über dem Login-Bereich reduzieren. –

Wenn Sie Ihre Entwickler-Tools verwenden, werden Sie sehen, dass das Logo-Feld einfach zu viel Breite verbraucht, so dass es das Login-Element in die zweite Zeile zwingt. Versuchen Sie, die Breite aus der Logo-Box zu entfernen und sehen Sie, was passiert. – Daniel

Ihr Problem ist die Marge für .logoArea, so können Sie Box-Sizing zu border-Box und statt Marge Padding verwenden.

Der Standardwert für Box-Sizing ist content-Box:

Dies ist der erste und Standardwert, wie durch den CSS-Standard spezifiziert. Die Eigenschaften width und height werden nur mit dem Inhalt gemessen, nicht jedoch mit dem Füll-, Rand- oder Randabstand. Hinweis: Polsterung, Rand & Rand wird außerhalb der Box z.B. IF .box {width: 350px;} DANN gilt: {border: 10px solid black;} RESULT {im Browser gerendert} eine Box mit der Breite: 370px. So einfach wird die Dimension des Elements wie berechnet, Breite = Breite des Inhalts und Höhe = Höhe des Inhalts (ohne die Werte von Rahmen und Auffüllen).

so zwei Möglichkeiten Ihr Problem zu lösen: 1. entfernen Sie den Rand 2. Set-Box-Sizing border-box + Kursspanne mit Polsterung

pls überprüfen das Box-Modell und Box-Sizing für weitere informationen :)

https://www.w3schools.com/css/css_boxmodel.asp https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

Quelle

2017-03-20 16:27:06 MarcelD

oben Ort aller ersten,

*{ 
box-sizing: border-box; 
}

Ändern Sie dann den Rand in .logoArea in padding.

.logoArea { 
height: 35px; 
width: 100px; 
background: url(media/6cVHHozUQSt.png) no-repeat; 
display: inline-block; 
overflow: hidden; 
padding: 10px 40px 0 45px; 
}

Quelle

2017-03-20 16:35:42

Div Tag Margin funktioniert nicht

Antwort

Verwandte Themen