3

In my code, I have styled all span tags and margin-left works fine in all tags but margin-top is not working at all. It happens all the time with me, so I thought to ask if I have any misconception of span tag. Please help!

<div id="header">
    <span id="logospan" style="margin-left: 30px; margin-top: 8px;"> <img src="logo.png" width="70px" height="70px"> </span>
    <span id="homespan" style="margin-left: 150px;margin-top: 0px;"> <img src="1.png"    width="40px" height="40px"> </span> 
    <span id=""         style="margin-left: 150px;margin-top: 0px;"> HOME </span>
</div>
AB.
  • 31
  • 2
  • 5
  • 2
    spans are inline. You should read up on the css `display` atrribute so that you understand it, and what the default `display` is for certain HTML elements. `div`'s are display block btw – zgood Dec 07 '16 at 18:53
  • http://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element – sol Dec 07 '16 at 18:53
  • Possible duplicate of [Why does this CSS margin-top style not work?](http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work) – Serlite Dec 07 '16 at 18:54
  • Possible duplicate of [What is the difference between HTML tags
    and ?](http://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span)
     – Marko Manojlovic Dec 07 '16 at 18:55
  • Be sure to search before posting you question, there are a number of related posts that have the answer to the question you just asked. – MrGood Dec 07 '16 at 18:57

5 Answers5

7

<span> is an inline element so top and bottom margins do not apply.

https://www.w3.org/TR/CSS2/visuren.html#inline-formatting

But those new buttons though..
  • 21,377
  • 10
  • 81
  • 108
3

so I thought to ask if I have any misconception of span tag

You do; they're inline elements, meaning Y-axis margins are effectless on them. You can keep their inline behaviour but give them margin by setting their display property to inline-block, i.e.

.someClass span { display: inline-block; }
Mitya
  • 33,629
  • 9
  • 60
  • 107
2

Since span tags are inline, not block elements. They can only take margin left and right, not top and bottom.

See this related post,

Margin-Top not working for span element?

Community
  • 1
  • 1
MrGood
  • 545
  • 5
  • 21
1

Add vertical-align:top; in both the elements. it works

<div id="header">
    <span id="logospan" style="margin-left: 30px; margin-top: 8px;vertical-align:top;"> <img src="logo.png" width="70px" height="70px"> </span>
    <span id="homespan" style="margin-left: 150px;margin-top: 0px;vertical-align:top;"> <img src="1.png"    width="40px" height="40px"> </span> 
    <span id=""         style="margin-left: 150px;margin-top: 0px;vertical-align:top;"> HOME </span>
</div>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55
1

According to https://developer.mozilla.org/en/docs/Web/CSS/margin margins apply to all elements, except elements with table display types other than table-caption, table and inline-table. However, vertical margins will not have any effect inline elements.

In your case a span in inline (rather than block level) and thus cannot be given vertical margins. However, simply changing them to inline-block will rectify this. You may also want to consider the vertical alignment as adding a top margin to something that's baseline aligned may not be much use.

span {display:inline-block; vertical-align:top;}
<div id="header">
    <span id="logospan" style="margin-left: 30px; margin-top: 8px;"> <img src="logo.png" width="70px" height="70px"> </span>
    <span id="homespan" style="margin-left: 150px;margin-top: 0px;"> <img src="1.png"    width="40px" height="40px"> </span> 
    <span id=""         style="margin-left: 150px;margin-top: 0px;"> HOME </span>
</div>

P.S I suspect that you are using these top margins in order to vertically align these elements. In which case vertical-align:middle may be a better method.

Moob
  • 14,420
  • 1
  • 34
  • 47