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 aksine1Block Level her tarafta margin,span kaplayan öğelerdir2bunun 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.


1. Block Level Elements - MDN Kaynağı

2. Inline Elements - MDN Kaynak

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • funbro1

    funbro1

    11 Aralık 2007
  • Jeremy Gallman

    Jeremy Gallm

    11 NİSAN 2012
  • sdasmarchives

    sdasmarchive

    2 HAZİRAN 2010