oberen Rand funktioniert nicht

Question

Sorry, ich bin Neuling in CSS. Ich habe folgende html:

<div class="box-A" >Box A is here</div> 
<div class="box-B" >Box B is here</div> 

und ich versucht haben, das folgende CSS, um es anzuwenden:

.box-A{ 
    background-color: red; 
    padding: 30px; 
    margin: auto; 
    border: 13px solid green; 
    margin-bottom: 40px; 
} 

.box-B{ 
    background-color: blue; 
    padding: 40px; 
    margin-top: 140 px; 
} 

Es funktioniert richtig für box-A mittlerweile, wenn ich mich bewerben margin-top: 140 px;-box-B Ich erwarte eine Marge sehen um 180px zwischen 2 Boxen. Aber nichts passiert. Können Sie mir bitte sagen, warum margin-top nicht wirkt?

Answer 1

Verwenden Sie kein Leerzeichen zwischen px und Zahl.

.box-B{ 
    background-color: blue; 
    padding: 40px; 
    margin-top: 140px; 
} 

Answer 2

in Bezug auf w3 schools css margin-top property kann es vorkommen, dass nur die größte der beiden Werte (oben und unten) angenommen wird.

Randzusammenbruch. Die oberen und unteren Ränder der Elemente werden manchmal zu einem einzigen Rand zusammengelegt, der dem größten der beiden Ränder entspricht. Dies passiert nicht an horizontalen Rändern (links und rechts)! Nur vertikale Ränder (oben und unten)!