Margin-Top không hoạt động cho phần tử span?

Ai đó có thể cho tôi biết những gì tôi mã hóa sai? Mọi thứ đều hoạt động, điều duy nhất là không có lề ở trên cùng.

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

Không giống như div, p ¹ là các phần tử Cấp khối có thể chiếm marginmọi phía, span² không thể là phần tử Nội tuyến chỉ chiếm lề theo chiều ngang.

Từ đặc điểm kỹ thuật :

Thuộc tính lề xác định chiều rộng của vùng lề của hộp. Thuộc tính tốc ký 'lề' đặt lề cho cả bốn phía trong khi các thuộc tính lề khác chỉ đặt cạnh tương ứng của chúng. Các thuộc tính này áp dụng cho tất cả các yếu tố, nhưng lề dọc sẽ không có bất kỳ ảnh hưởng nào đến các yếu tố nội tuyến không được thay thế.

Bản trình diễn 1 (Dọc marginkhông được áp dụng như spanlà một inlineyếu tố)

Giải pháp? Làm cho spanyếu tố của bạn , display: inline-block;hoặc display: block;.

Bản demo 2

Sẽ đề nghị bạn sử dụng display: inline-block;vì nó sẽ inlinelà tốt như block. Làm cho nó blockchỉ sẽ dẫn đến yếu tố của bạn hiển thị trên một dòng khác , như blockcác yếu tố mức độ mất 100%không gian ngang trên trang, trừ khi họ được thực hiện inline-blockhoặc họ là floatedđể lefthay right.

^{1. Các yếu tố cấp khối - Nguồn MDN}

^{2. Các phần tử nội tuyến - Tài nguyên MDN}

Có vẻ như bạn đã bỏ lỡ một số tùy chọn, hãy thử thêm:

position: relative;
top: 25px;

spanlà một yếu tố nội tuyến không hỗ trợ lề dọc. divThay vào đó, đặt lề bên ngoài .

spanphần tử display:inline;theo mặc định bạn cần phải làm cho nó inline-blockhoặcblock

Thay đổi CSS của bạn để được như thế này

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

Luôn nhớ một điều chúng ta không thể áp dụng lề theo chiều dọc cho các phần tử nội tuyến, nếu bạn muốn áp dụng thì hãy thay đổi kiểu hiển thị của nó thành khối hoặc khối nội tuyến. Ví dụ span {display: inline-block;}