Margin-top neden doğru çalışmıyor?

Bu yüzden 100px aşağı gitmek için içindeki metin ile kırmızı kutu almaya çalışıyorum, ancak bu resim tarafından görebileceğiniz kadar iyi çalışmıyor (https://gyazo.com/786598af68920c4900aac6ba6a5b3022) Sanki support_wrapper div alıyor gibi görünüyor ve Bunu 100px aşağı doğru hareket ettirerek. Her yere baktım ve ne için cevap bulmak için görünmüyor olabilir basit bir soru sorduğunuz için üzgünüm ama, herhangi bir yardım # eklemek için harika :)Margin-top neden doğru çalışmıyor?

<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>

kaynak

2016-03-20 Kaden Nelson

deneyin duyarız form_wrapper başında bu:

position: absolute;

bu çalışırsa bana duyayım :)

kaynak

2016-03-20 22:44:01 callmeniko

deneyin padding-top, zaten bir boyut kümesi vardır bir div içindeki payı olamaz.

kaynak

2016-03-20 22:44:49 liam

Sen kabın içine oğul marjı tutmak için margin collapsing

ilgileniyor (sadece tahmin ediyorum, ben aynı sorunu sadece kullanılan dolgu oldu), bir şeffaf sınır kullanabilir

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>

kaynak

2016-03-20 22:55:09

Margin-top neden doğru çalışmıyor?

cevap

İlgili konular