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

Question

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

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

Answer 1

Không giống như div, p là Block Level yếu tố mà có thể mất margin trên tất cả các bên, span không thể vì nó là một yếu tố Inline mà chiếm lề theo chiều ngang mà thôi.

Từ specification:

tính Margin chỉ định chiều rộng của khu vực lề của một hộp. Thuộc tính viết tắt của ' ' lề 'đặt lề cho tất cả bốn mặt trong khi các thuộc tính lề khác chỉ thiết lập mặt tương ứng của chúng. Các thuộc tính này áp dụng cho tất cả các thành phần, nhưng lợi nhuận theo chiều dọc sẽ không có bất kỳ tác động nào đối với các yếu tố nội tuyến không được thay thế.

Demo 1 (Vertical margin không áp dụng như span là một yếu tố inline)

Giải pháp? Tạo thành phần span, display: inline-block; hoặc display: block; của bạn.

Demo 2

sẽ đề nghị bạn sử dụng display: inline-block; vì nó sẽ inline cũng như block. Chỉ làm cho nó block sẽ khiến yếu tố của bạn hiển thị on another line, như block yếu tố mức mất 100% không gian ngang trên trang, trừ khi chúng được làm inline-block hoặc chúng là floated đến left hoặc right.

---

^{1. Block Level Elements - MDN Nguồn}

^{2.Inline Elements - MDN Resource}

Answer 2

span là một yếu tố nội tuyến mà không hỗ trợ lề dọc. Đặt lề trên bên ngoài div thay thế.

Answer 3

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

Thay đổi CSS của bạn là 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;*/ 
} 

Answer 4

Hình như bạn bỏ lỡ một số tùy chọn, hãy cố gắng thêm:

position: relative; 
top: 25px;