Margin-Top, span öğesi için çalışmıyor mu?

Birisi bana neyi yanlış kodladığımı söyleyebilir mi? Her şey çalışıyor, tek şey üstte kenar boşluğu olmaması.

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

Aksine div, p ¹ olan Blok Seviye kadar sürebilir elemanları marginher tarafta, span² edemez bir olduğu gibi satır içi yatay sadece marjları kaplıyor öğesi.

Gönderen şartname :

Kenar boşluğu özellikleri, bir kutunun kenar boşluğu alanının genişliğini belirtir. 'Margin' shorthand özelliği, dört kenarın da kenar boşluğunu ayarlarken, diğer kenar boşluğu özellikleri yalnızca ilgili kenarlarını ayarlar. Bu özellikler tüm öğeler için geçerlidir, ancak dikey kenar boşluklarının değiştirilmemiş satır içi öğeler üzerinde herhangi bir etkisi olmayacaktır.

Demo 1 (Dikey , öğe marginolarak uygulanmadı )spaninline

Çözüm? Senin yapın spanelemanı, display: inline-block;ya da display: block;.

Demo 2

Kullanmak öneririm display: inline-block;o olacak gibi inlinehem de block. O Making blocksadece işlemek için eleman sonuçlanacaktır başka satırda olarak, blockseviye elemanları almak 100%yapılmadığı sürece, sayfadaki yatay alan inline-blockveya bunlar floatediçin leftya right.

^{1. Blok Seviyesi Elemanları - MDN Kaynağı}

^{2. Satır İçi Öğeler - MDN Kaynağı}

Bazı seçenekleri kaçırdığınız anlaşılıyor, eklemeyi deneyin:

position: relative;
top: 25px;

spandikey kenar boşluklarını desteklemeyen satır içi bir öğedir. Kenar boşluğunu divbunun yerine dış tarafa koyun .

spanöğesi display:inline;varsayılan olarak bunu yapmanız inline-blockveyablock

CSS'nizi böyle olacak şekilde değiştirin

span.first_title {
    margin-top: 20px;
    margin-left: 12px;
    font-weight: bold;
    font-size:24px;
    color: #221461;
    /*The change*/
    display:inline-block; /*or display:block;*/
}

Her zaman satır içi öğelere kenar boşluğunu dikey olarak uygulayamayacağımız bir şeyi hatırlayın, uygulamak istiyorsanız ekran türünü blok veya satır içi blok olarak değiştirin. For span span {display: inline-block;}