如何使像css这样的元素相对但有间距

Posted 2023-03-06

【中文标题】如何使像css这样的元素相对但有间距

【英文标题】：How to make element like css realtive but with spacing

【发布时间】：2022-01-03 19:13:45

【问题描述】：

我希望元素表现得像正常的 css 相对定位，但有一个例外。我想在相对定位后放置它的地方制作这个元素的填充/边距。 可能吗 ？ ，请大家帮帮我

好吧，我举个例子：

<div style="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div style="position:relative; background: pink; top: 40px; margin-bottom: 50px;">Second div relative position</div>
<div>Third div. Third div.Third div.Third div.Third div.Third div.Third div.Third div. Third div.Third div.Third div.Third div.Third div.Third div.Third div.Third div.Third div.Third div. Third div.Third div.Third div.Third div.Third div.Third div.Third div. Third div.Third div.Third div.Third div.Third div.Third div.Third div.Third div.Third div.</div>

我希望这个粉色元素边距底部影响带有第三个 div 的 div。

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

我的回答有什么问题？只奉献？？？如果我误解了你，请提供更多信息

抱歉点击错误，我尽量让我的问题更清楚

【参考方案1】：

一切正常。

如果你在 position: relative 和 top: 40px 中放置一个元素，那么 div 仍然是 top: 0，它只会在该像素下方 40 像素处呈现。

因此，在您的示例中，您设置了 margin-bottom: 50px 和 top: 40px。 由于底部有 40px 的“偏移”，您的“边距”如下：

margin-top: 40px -> 因为'top: 40px'

和

margin-bottom: (pinkDivHight + 50px) - 40px

<div style="">Lorem Ipsum</div>
<div style="position:relative; background: pink; top: 40px; margin-bottom: 50px;">Second div relative position</div>
<div>Third div.</div>

【讨论】：

但是如果你想让你的 div 介于两个 div 之间，只需使用 margin-top 和 margin-bottom 并且不要使用 top 或 sth。应该更简单，更清洁。