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

【问题标题】：Margin ignoring top,right,and bottom CSS,HTML忽略顶部、右侧和底部 CSS、HTML 的边距
【发布时间】：2015-09-15 05:30:12
【问题描述】：

我在一个高度为 100 像素的 div 内有一个包含“Hello”一词的跨度。我正在尝试将 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>

【问题讨论】：

标签： html css

【解决方案1】：

将 display:block 添加到您的 CSS 跨度

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>

【讨论】：

@frosty 是的，我会选择 Dmitriy。您也可以添加 display:inline-block，这取决于您的要求

【解决方案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

【讨论】：