Margin ignoring top,right,and bottom CSS,HTML

Question

I have a span with the word 'Hello' inside it, inside a div with a height of 100px. I'm trying to assign the margin of 50px to the span, top, left, right, and bottom, but for some reason it's only assigning the margin of 50px to the left of the span. I don't know what I did wrong. Please take a look at my code:

<style>

div {
border: 1px solid red;
height: 100px;
}

span {
border: 1px solid blue;
margin: 50px;
}

</style>

<div> <span> Hello </span> </div>

Answer 1

Add display:block to your CSS span

CSS

span {
display:block;
border: 1px solid blue;
margin: 60px;
}

UPDATE

If you give width here it will still work , but makesure you have enough space remaining for span to cover as margn:60px; would throw it 60px left.

 div { border: 1px solid red; height: 100px; width: 200px; } span { display: block; border: 1px solid blue; margin: 60px; width: 50px; /* You could also set here or just leave it*/ } 

 <div> <span> Hello </span> </div> 

Answer 2

 div { border: 1px solid red; height: 100px; } span { border: 1px solid blue; margin: 50px; display: block; } 

 <div> <span> Hello </span> </div> 

You have to change the display property of span to inline-block or block or use any block element to achieve the same. I have changed display property of span to block