Margin-Top nie działa dla elementu span?

Question

Czy ktoś może mi powiedzieć, co źle napisałem? Wszystko działa, jedyną rzeczą jest to, że na szczycie nie ma marginesu.

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

przeciwieństwie div, p które Block Level elementy, które mogą przyjąć margin się ze wszystkich stron, span nie może, ponieważ jest to element, który wykonuje się Inline marginesy wyłącznie poziomo.

Z specification:

właściwości Margin określić szerokość obszaru marginesu pola. Skrócona własność "margin" określa margines dla wszystkich czterech boków, podczas gdy inne właściwości marginesu ustawiają tylko odpowiednią ich stronę. Te właściwości dotyczą wszystkich elementów, ale marginesy pionowe nie będą miały żadnego wpływu na niewymienione elementy śródliniowe.

Demo 1 (pionowa margin nie jest stosowana jako span jest elementem inline)

rozwiązanie? Stwórz element span, display: inline-block; lub lub display: block;.

Demo 2

Proponuję Ci skorzystać display: inline-block; jak to będzie inline jak block. Ustawienie go na block spowoduje tylko, że element będzie renderował on another line, jako że elementy poziomu zajmują 100% poziomą przestrzeń na stronie, chyba że są wykonane inline-block lub są floated na left lub right.

---

^{1. Block Level Elements - MDN Źródło}

^{2.Inline Elements - MDN zasobów}

Answer 2

span jest elementem inline, który nie obsługuje marginesy pionowe. Zamiast tego umieść margines na zewnętrznym div.

Answer 3

span elementem jest display:inline; domyślnie trzeba zrobić to inline-block lub block

Zmień CSS tak być

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

Wygląda na to brakowało kilka opcji, spróbuj dodaj:

position: relative; 
top: 25px;