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

  • expertvillage

    expertvillag

    5 NİSAN 2006
  • Kayla Caton - Peet

    Kayla Caton

    23 HAZİRAN 2012
  • TecnoTutosPC

    TecnoTutosPC

    19 Kasım 2012