Warum funktioniert Margin-Top nicht richtig?

Also ich versuche, die rote Box mit Text darin zu bekommen 100px hinunter gehen, aber es funktioniert nicht so gut, wie Sie durch dieses Bild sehen können (https://gyazo.com/786598af68920c4900aac6ba6a5b3022) Es scheint, als ob es die support_wrapper div auch und das auch um 100px nach unten verschieben. Ich habe überall gesucht und es tut mir leid, eine einfache Frage zu stellen, die ich nicht für die Antwort finden könnte scheinen, aber bitte, jede mögliche Hilfe wäre toll, # :)Warum funktioniert Margin-Top nicht richtig?

<html> 
    <head> 
     <style> 
      body { 
       background-color: #252525;   
      } 
      #support_wrapper { 


       /* Setting the size of the wrapper */ 
       width: 1200px; 
       height: 1600px; 

       /* Backgrond image properties */ 
       background-image: url("Support.png"); 
       background-position: center; 
       background-repeat: none; 

       /* Center the div */ 
       margin: 0 auto; 
       padding: 0 auto; 

      } 
      #form_wrapper { 

       /* Debugging */ 
       border: 1px solid black; 
       background-color: red; 

       margin-top: 100px; 
      } 

     </style> 
    </head> 
    <body> 
     <div id="support_wrapper"> 
      <div id="form_wrapper"> 
       <p> text in the form box </p> 
      </div> 
     </div> 

    </body> 
</html>

Quelle

2016-03-20 Kaden Nelson

Versuchen hinzufügen form_wrapper am Anfang dieses:

position: absolute;

Lassen Sie mich hören, ob das funktioniert :)

Quelle

2016-03-20 22:44:01 callmeniko

try padding-top, kann man nicht Rand innerhalb eines div, die bereits eine feste Größe hat. (Ich gerade bin zu raten, ich habe das gleiche Problem hatte und nur verwendet padding)

Quelle

2016-03-20 22:44:49 liam

Sie beschäftigen sich mit margin collapsing

die Childs Marge im Inneren des Behälters zu halten, können Sie eine transparente Grenze verwenden

border-top:1px solid transparent;

body { 
 
    background-color: #252525; 
 
} 
 
#support_wrapper { 
 
    /* Setting the size of the wrapper */ 
 
    width: 1200px; 
 
    height: 1600px; 
 
    /* Backgrond image properties */ 
 
    background-image: url("Support.png"); 
 
    background-position: center; 
 
    background-repeat: none; 
 
    /* Center the div */ 
 
    margin: 0 auto; 
 
    padding: 0 auto; 
 
    background:yellow;/* show me */ 
 
    border-top:1px solid transparent;/* prevent collapsing margin */ 
 
} 
 
#form_wrapper { 
 
    /* Debugging */ 
 
    border: 1px solid black; 
 
    background-color: red; 
 
    margin-top: 100px; 
 
}

<div id="support_wrapper"> 
 
    <div id="form_wrapper"> 
 
    <p>text in the form box</p> 
 
    </div> 
 
</div>

Quelle

2016-03-20 22:55:09

Warum funktioniert Margin-Top nicht richtig?

Antwort

Verwandte Themen