Öğe öğeleri neden sol ve sağ kenar boşluklarını ayarlayamıyor?

Question

Sarmalayıcıda, yüzer öğeler sol ve sağ kenar boşluğu ayarlarına yanıt vermiyor gibi görünüyor. Örnek:

html:

<div id ="wrapper"> 
    <div id = "content"></div> 
</div> 

css:

#wrapper 
{ 
    width:  1000px; 
    display:   block; 
    margin-left:   auto; 
    margin-right: auto; 
    overflow:   hidden; 
} 

#content 
{ 
    width:    400px; 
    height:    200px; 
    display:    block; 
    float:    left; 
    margin-left:   30px; 
} 

#content sol kenar boşluğu ayarını yok sayar. Niye ya?

Answer 1

Kenar boşlukları, yüzen öğeleri hareket ettirmez, "içeriği uzaklaştırır".

sen süzülüyor elemanı taşımak istiyorsanız, aşağıdaki CSS kuralları bunu verebilir:

#content { 
    position: relative; 
    left: 30px; 
} 

alternatif elemanını şeffaf sınır veriyor: Eğer varsa

#content { 
    border-left: 30px transparent; 
} 

sadece başka bir div'in içinde bir div pozisyonuna bakmak için mutlak konumlandırmayı kullanın:

Answer 2

@ Marcus'un cevabı iyidir. Süzülmüş bir öğenin kenar boşluklarına sahip olmanın sahte bir başka yolu, içeriği başka bir kapsayıcının içine koymak ve dolgu malzemesi kullanmaktır:

.outer 
{ 
    float: left; 
    padding: 10px; 
} 

.inner 
{ 
}