Question

我的内部有一个'Hello'字样，在一个高度为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

将display：block添加到CSS范围

<强> CSS

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

<强>更新

如果你在这里给出宽度它仍然可以工作，但是你可以确保你有足够的空间来覆盖范围作为margn：60px;将它扔掉60px。

＆＃13;

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*/
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

您必须将display的{{1}}属性更改为span或inline-block，或使用任何block元素来实现相同的目标。我已将block的{{1}}属性更改为display

保证金忽略顶部，右侧和底部CSS，HTML

2 个答案: