Margin-Top not working for span element?
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;
}
Unlike div
, p
1 which are Block Level elements which can take up margin
on all sides,span
2 cannot as it's an Inline element which takes up margins horizontally only.
From the specification:
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
Demo 1 (Vertical margin
not applied as span
is an inline
element)
Solution? Make your span
element, display: inline-block;
or display: block;
.
Demo 2
Would suggest you to use display: inline-block;
as it will be inline
as well as block
. Making it block
only will result in your element to render on another line, as block
level elements take 100%
of horizontal space on the page, unless they are made inline-block
or they are floated
to left
or right
.
1. Block Level Elements - MDN Source
2. Inline Elements - MDN Resource
Looks like you missed some options, try to add:
position: relative;
top: 25px;