Margin-Top tidak berfungsi untuk elemen span?

Bisakah seseorang memberi tahu saya apa yang salah kode saya? Semuanya berfungsi, satu-satunya hal adalah tidak ada margin di atas.

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

Tidak seperti div, p ¹ yang merupakan elemen Blok Level yang dapat digunakan margindi semua sisi, span² tidak bisa karena ini adalah Inline elemen yang hanya mengambil margin secara horizontal.

Dari spesifikasi :

Properti margin menentukan lebar area margin kotak. Properti steno 'margin' menetapkan margin untuk keempat sisi sementara properti margin lainnya hanya mengatur sisi mereka masing-masing. Properti ini berlaku untuk semua elemen, tetapi margin vertikal tidak akan mempengaruhi elemen inline yang tidak diganti.

Demo 1 (vertikal margintidak diterapkan sebagai spanadalahinline elemen)

Larutan? Buat spanelemen Anda , display: inline-block;atau display: block;.

Demo 2

Sarankan Anda untuk menggunakan display: inline-block;karena akan inlinebaik block. Sehingga blockhanya akan mengakibatkan elemen Anda untuk membuat on line lain , sebagai blockelemen-elemen tingkat mengambil 100%ruang horisontal pada halaman, kecuali mereka dibuat inline-blockatau mereka floatedke leftatau right.

^{1. Blok Tingkat Elemen - Sumber MDN}

^{2. Elemen Inline - Sumber Daya MDN}

Sepertinya Anda melewatkan beberapa opsi, coba tambahkan:

position: relative;
top: 25px;

spanadalah elemen sebaris yang tidak mendukung margin vertikal. Taruh margin di bagian luar divsebagai gantinya.

spanelemen secara display:inline;default Anda harus membuatnya inline-blockataublock

Ubah CSS Anda menjadi seperti ini

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

Selalu ingat satu hal yang kita tidak bisa menerapkan margin secara vertikal ke elemen inline, jika Anda ingin menerapkan kemudian ubah tipe tampilan untuk memblokir atau blok inline. Misalnya span {display: inline-block;}