边距忽略顶部，右侧和底部CSS，HTML

Question

我有一个跨度单词'你好'在里面，一个高度为100px的div内。我试图将跨度，顶部，左侧，右侧和底部的边距分配为50px，但由于某种原因，它只在边距的左侧分配了50px的边距。我不知道我做错了什么。请看看我的代码：

test.php的

<style> 

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

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

</style> 

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

Answer 1

添加显示：块到你的CSS跨度

CSS

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

UPDATE

如果你在这里给出宽度，它仍然可以工作，但是可以确保你有足够的空间来满足跨度：60px;会抛出60px左边。

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>

你要的span的display属性更改为inline-block或block或使用任何block元素来实现相同的。我已将display属性span更改为block