第一个跨度的边距顶部不起作用[重复]

Posted 2023-03-06

【中文标题】第一个跨度的边距顶部不起作用[重复]

【英文标题】：Margin top of first span not working [duplicate]

【发布时间】：2014-02-07 18:23:53

【问题描述】：

<div class ="cards">
  <span id="cardtitle">
    Chance 
  </span>
  <span id="cardinfo">
    Your ass is going to jail.
  </span>
</div>

.cards
  background: #F8F8F8 ;
  height: 100px;
  margin: 0 auto;
  width: 200px;

#cardtitle, #cardinfo
  background: #ffcc00;
  display: block;
  margin-top: 10px;
  width: 100px;

好的，#cardinfo 上的边距顶部有效，但 #cardtitle 无效。问题似乎是第一个元素，因为如果我反转 2 个跨度，问题就会逆转。

【问题讨论】：

那是因为margin collapse。

不，它不是重复的，因为 margin-top 对我有用，尽管不适用于第一个 span 元素。

@EltonFrederik 是的，我是在我关闭后才知道的，很抱歉，我已经回答了，我意识到的那一刻

【参考方案1】：

您面临的问题称为collapsed margin，因此您可以使用position: relative; 并将top 设置为10px 或在父元素上使用overflow: auto;。

Demo （使用overflow: auto;）

Demo 2 （使用position: relative; + top: 10px; 和top: 20px;）

position: relative; 方法将要求您单独设置 top，因为它会移动您的元素，尽管它会物理保留空间，因此您必须为第二个加倍..

【讨论】：

@Alien 先生，它起作用了，但我能问一下为什么我需要overflow: auto;，我认为这是默认设置。我的 div 足够大，可以容纳 2 个跨度...？

@EltonFrederik 它定义了新的块格式化上下文，你也可以使用overflow: hidden;...任何你喜欢的

您可以使用 position:absolute 和 top、right、left 和 bottom 来根据您的选择定位元素。