CODEWITHSUNDEEP
htmlcss
frosty
frosty

Reputation: 2649

Margin ignoring top,right,and bottom CSS,HTML

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:

test.php 

<style>

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

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

</style>

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

Upvotes: 0

Views: 115

Answers (2)

divy3993
divy3993

Reputation: 5810

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>

Upvotes: 1

Arun Saragadam
Arun Saragadam

Reputation: 75

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

Upvotes: 1

Related Questions