Can someone tell me what I coded wrong? Everything is working, the only thing is that there is no margin at the top.
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;
}
Always remember one thing we can not apply margin vertically to inline elements ,if you want to apply then change its display type to block or inline block.for example span{display:inline-block;}
span element is display:inline; by default you need to make it inline-block or block
Change your CSS to be like this
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;*/
}
Looks like you missed some options, try to add:
position: relative;
top: 25px;
span is an inline element that doesn't support vertical margins. Put the margin on the outer div instead.
Source: Stackoverflow.com