Margin-Top yok span öğesi için çalışıyor?

SORU

28 Temmuz 2012, CUMARTESİ

Margin-Top yok span öğesi için çalışıyor?

Ben birini kodlu söyle bana, ne yanlış olabilir? Her şey çalışıyor, tek şey üst kenar boşluğu yok.

HTML:

<div id="contact_us"> <!-- BEGIN CONTACT US -->
<span class="first_title"> Contact</span><span class="second_title">Us </span>

<p class="content"> For any questions whatsoever please contact us through the       following e-mail address:
</p> </br></br>
<p class="e-mail"> info@e-mail.com </p></br></br></br></br>



<p class="read_more"> <a href="underconstruction.html"> Read More</a> </p>
</div> <!-- END CONTACT US -->

CSS:

span.first_title {
    margin-top: 20px;
    margin-left: 12px;
    font-weight: bold;
    font-size:24px;
    color: #221461;
}

span.second_title {
    margin-top: 20px;
    font-weight: bold;
    font-size:24px;
    color: #b8b2d4;
}

CEVAP

28 Temmuz 2012, CUMARTESİ

div, p aksine¹Block Level her tarafta margin,span kaplayan öğelerdir²bunun gibi olamaz. kenar boşlukları yalnızca yatay olarak kaplar Inline bir unsuru.

specification :

Marj nitelikleri bir çerçevenin kenar boşluğu alanının genişliğini belirtir. Bu 'boşluğu' steno özelliği dört kenarın boşluğu ise ayarlar diğer kenar boşluğu özellikleri sadece kendi tarafına yerleştir. Bu özellikleri tüm elementler için geçerlidir, ama dikey kenar boşlukları olmaz sigara yerine satır içi öğeler üzerinde herhangi bir etkisi.

Demo 1 (Dikey margin span inline bir öğe olarak uygulanır)

Çözüm? span element display: inline-block; display: block;.

Demo 2

Önerin inline block olacak display: inline-block; kullanmak için. Yapma block sadece sonuç unsuru oluşturmak on another line, block seviye olan elementler 100% Yatay Boşluk sayfada, sürece onlar yaptı inline-block floated left right.