Margin-Top not working for span element?

Question

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

score 415 · Accepted Answer · edited Aug 12 '17 at 13:56

Unlike div, p ¹ which are Block Level elements which can take up margin on all sides,span² 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}

the best explanation for the beginners. Thanks million @Mr.Alien — Tapesh Patel, May 25 '22 at 08:41

score 98 · Answer 2 · edited Aug 29 '21 at 20:36

98

Looks like you missed some options, try to add:

position: relative;
top: 25px;

edited Aug 29 '21 at 20:36

bad_coder

11,289
20
44
72

answered Aug 11 '15 at 18:53

Freelancer Mahmud

1,125
7
5

Although this doesn't answers the question, but is a good solution to the problem! – Bruce May 25 '17 at 03:54

score 15 · Answer 3 · edited Aug 29 '21 at 20:37

15

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

edited Aug 29 '21 at 20:37

bad_coder

11,289
20
44
72

answered Oct 17 '14 at 05:23

Egli Becerra

961
1
13
25

score 13 · Answer 4 · edited Oct 17 '14 at 05:20

13

span is an inline element that doesn't support vertical margins. Put the margin on the outer div instead.

edited Oct 17 '14 at 05:20

cameronjonesweb

2,435
3
25
37

answered Jul 28 '12 at 12:24

Mr Lister

45,515
15
108
150

Alijon Jumanazarov · Answer 5 · 2022-02-09T18:41:02.233

5

<span>tag doesn't accept margin, padding you need to add some css style and make your <span> tag as block or inline-block in order to use margin, padding for <span> tags, but the best way to use is div tag.

span{ display:inline-block or block;}

edited Feb 09 '22 at 18:41

answered Sep 08 '21 at 17:14

Alijon Jumanazarov

312
3
11

score 4 · Answer 6 · edited May 05 '21 at 11:27

4

Always remember one thing: we can not apply margin vertically to inline elements. If you want to apply vertical margins then change its display type to block or inline-block

span {
    display: inline-block;
}

edited May 05 '21 at 11:27

Tim

5,435
7
42
62

answered Mar 16 '18 at 16:11

Danny

193
12

Margin-Top not working for span element?

6 Answers6

Linked

Related