why all margin in spans do not work? do they accept only one margin or what?

Question

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>  

Answer 1

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

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

Answer 2

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