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

Question

我有一个span，里面有单词"Hello"，在一个高度为100px的div里面。我试图将50像素的边距分配给跨度、顶部、左侧、右侧和底部，但出于某种原因，它只将50像素边距分配给了跨度的左侧。我不知道我做错了什么。请看一下我的代码：

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

将display:block添加到您的CSS span

CSS

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

更新

如果你在这里给出宽度，它仍然可以工作，但要确保你有足够的空间让span覆盖margn:60px；会把它扔到左边60像素

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元素来实现相同的目的。我已将span的display属性更改为block