Was ist Marge in CSS?

Ich nahm an, margin ist der Abstand zwischen Elternelement und sich seit langer Zeit. Aber ich denke, es ist nicht wahr. Bitte schauen Sie sich unten kurzes HTML mit CSS an.Was ist Marge in CSS?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Box Model</title> 
<style type="text/css"> 
    body { 
    background-color: #ccc; 
    } 
    header { 
     text-align: center; 
     text-decoration: underline; 
     font-weight: bold; 
    } 
    #container { 
     background-color: grey; 
     width : 400px; 
     height : 400px; 
    } 
    #container .box { 
     background-color: slategrey; 
     width : 200px; 
     height : 200px; 
     color : #fff; 
     border: 5px solid navy; 
     margin-top: 50px; 
     margin-left:50px; 
     padding-top:20px; 
     padding-left:20px; 
    } 
</style> 
</head> 
<body> 
    <header>Box Model Example</header> 
    <section> 
     <div id="container"> 
      <div class="box">Content</div> 
     </div> 
    </section> 
</body> 
</html>

Sie sehen die Ausgabe wie unten Bildschirmfoto.

Mein margin-top:50px; ist nicht der Raum zwischen Eltern elment Behälter und Element Box. Wie könnte ich den Raum (von oben) zwischen diesen beiden Elementen hinzufügen?

Quelle

2016-04-12 Cataclysm

Sie sind nicht falsch, was Marge ist. Ich denke, Ihre eigentliche Frage ist "Warum funktioniert margin-top hier nicht?".

Wenn ich mich nicht irre, ist dies ein Fall von collapsing margins: Unter bestimmten Umständen werden vertikale Ränder von zwei Elementen kombiniert. (Beachten Sie, wie dort ist oberen Rand in Ihrem Beispiel, es ist nur alles auf der äußeren Box.)

Sie können versuchen, eine der genannten Lösungen drüben (z. B. schwebend die innere Box), oder fügen Sie Padding zu die äußere Box stattdessen.

Quelle

2016-04-12 11:26:59 vvye

Danke, mein Herr! Wie du beschrieben hast, ist meine eigentliche Frage "Warum funktioniert" margin-top "hier nicht?" Ihr vorgeschlagener Link ist die Lösung für mein Problem und meine Frage scheint damit doppelt zu sein. – Cataclysm

-3

Add padding-top auf Ihre #container:

#container { padding-top: 50px;}

Quelle

2016-04-12 11:24:45 Vishit

Sie Ihre Antwort erklären können. Dies löst jedoch nicht das Problem, –

Sie wollten Rand zwischen Container und Container-Box? – Vishit

-2

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Box Model</title> 
 
<style type="text/css"> 
 
\t #container:before, #container:after{content:''; display:table;} 
 
\t #container:after{clear:both} 
 
\t #container{zoom:1;} 
 
    body { 
 
    background-color: #ccc; 
 
    } 
 
    header { 
 
     text-align: center; 
 
     text-decoration: underline; 
 
     font-weight: bold; 
 
    } 
 
    #container { 
 
     background-color: grey; 
 
     width : 400px; 
 
     height : 400px; 
 
    } 
 
    #container .box { 
 
     background-color: slategrey; 
 
     width : 200px; 
 
     height : 200px; 
 
     color : #fff; 
 
     border: 5px solid navy; 
 
     margin-top: 50px; 
 
     margin-left:50px; 
 
     padding-top:20px; 
 
     padding-left:20px; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <header>Box Model Example</header> 
 
    <section> 
 
     <div id="container"> 
 
      <div class="box">Content</div> 
 
     </div> 
 
    </section> 
 
</body> 
 
</html>

Quelle

2016-04-12 11:34:45

Code korrekt ist.

aber Sie müssen diese Zeilen zu Ihrem #container & #container .box Klassen hinzufügen.

display:inline-block; 
position:relative;

erfahren Sie mehr über Display & Position in: http://www.w3schools.com

Ihre endgültige Code:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Box Model</title> 
<style type="text/css"> 
    body { 
    background-color: #ccc; 
    } 
    header { 
     text-align: center; 
     text-decoration: underline; 
     font-weight: bold; 
    } 
    #container { 
     background-color: grey; 
     width : 400px; 
     height : 400px; 
     display:inline-block; 
     position:relative; 
    } 
    #container .box { 
     background-color: slategrey; 
     width : 200px; 
     height : 200px; 
     display:inline-block; 
     position:relative; 
     color : #fff; 
     border: 5px solid navy; 
     margin-top:50px; 
     margin-left:50px; 
     padding-top:20px; 
     padding-left:20px; 
    } 
</style> 
</head> 
<body> 
    <header>Box Model Example</header> 
    <section> 
     <div id="container"> 
      <div class="box">Content</div> 
     </div> 
    </section> 
</body> 
</html>

Quelle

2016-04-12 11:41:31 aghilpro

Was ist Marge in CSS?

Antwort

Verwandte Themen