web-gelistirme-sc.com

Margin-Top span element için çalışmıyor mu?

Birisi bana neyi yanlış kodladığımı söyleyebilir mi? Her şey çalışıyor, tek şey en üstte marj 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">[email protected]</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;
}   
146
user1548544

div'in aksine _, p 1 olan Blok Seviyesi her tarafta margin alabilen öğeler, span2 onun gibi olamaz Satır içi kenar boşluklarını yalnızca yatay olarak alan öğe.

şartname 'den:

Kenar boşluğu özellikleri, bir kutunun kenar boşluğu genişliğini belirtir. 'Kenar boşluğu' kısayol özelliği, dört kenarın tümü için kenar boşluğunu ayarlarken, diğer kenar boşluğu özellikleri yalnızca kendi taraflarını belirler. Bu özellikler tüm öğelere uygulanır, ancak dikey kenar boşlukları değiştirilmemiş satır içi öğeler üzerinde hiçbir etkiye sahip olmaz.

Demo 1 (Dikey margin, span olarak uygulanmadı _, inline öğesidir)

Çözüm? span öğesini, display: inline-block; veya display: block; yapın.

Demo 2

display: inline-block; kullanmanızı, inline ve bunun yanında block kullanmanızı öneririm. block öğesinin yalnızca elemanınızın başka bir satırda , block olarak işlenmesiyle sonuçlanması düzey öğeleri, 100% yapılmadıkça veya floated ila left veya right olmadıkça sayfadaki inline-block alanını alır.


1. Blok Seviyesi Öğeleri - MDN Kaynağı

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

262
Mr. Alien

Bazı seçenekleri kaçırdığınız görülüyor, eklemeye çalışın: 

position: relative;
top: 25px;
48
Freelancer Mahmud

span, dikey kenar boşluklarını desteklemeyen satır içi bir öğedir. Kenar boşluğunu dış div yerine koyun.

9
Mr Lister

span öğesi varsayılan olarak display:inline; şeklindedir, inline-block veya block

CSS’nizi bu ş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;*/
}
2
Egli Becerra

Kenar boşluğunu satır içi öğelere dikey olarak uygulayamayacağımız bir şeyi her zaman hatırlayın, uygulamak istiyorsanız, görüntüleme türünü engellemek veya satır içi blok olarak değiştirin. Örneğin span {display: inline-block;}

0
Danny