Html Div与移动预览中的文本重叠

我有一个包含图像和文本的div块：

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
<div style="position: absolute; top: 50px; left: 78px;">
<p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
</div>
</div>

“理解意味着能够有效沟通”

我已经申请了

marginbottom:90px以在div和可能位于其下方的任何
p
标记之间创建间隙

它可以在全屏幕上正常工作，但在移动设备上，它看起来是这样的：

如您所见，它在
div
之后重叠了以下
p
标记。我怎样才能解决这个问题？理想情况下，我希望父div和div之外的任何内容之间有一个
20px
间隙

编辑：

我觉得我的方法是错误的。即，如果我删除
页边距底部：90px
从上面的代码中，div仍将与以下任何
p
标记重叠：
您可以将
边距顶部
放在标记
p
内。我建议您为每个标记（
div
，
p
…）放置一个
id
或
class
），以使结构更简单，并且标签不会重叠
 尝试以这种方式编辑html代码，并将此
媒体查询添加到代码中

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
  <div style="position: absolute; top: 50px; left: 78px;" class="quotation">
    <p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
  </div>
</div>

@media screen and (max-width: 767px) {
  .quatation {
    position: static !important;
  }
}


“理解意味着能够有效沟通”
@媒体屏幕和屏幕（最大宽度：767px）{
.方程式{
位置：静态！重要；
}
}
其他元素与报价元素重叠的原因是，主要决定元素高度的元素（包含
段落的
div
具有
绝对位置。绝对定位元素不再是父元素的一部分（除非父元素具有相对定位）。因此，在这种情况下，由于带有
段落
的
div
不再是父元素的“一部分”，因此父元素将仅具有基于
静态
/
相对
定位元素的高度。这就是图像

作为解决方案，您可以将
p
元素的
绝对位置切换到
img
元素。您知道图像的宽度和高度，因此可以为段落元素设置
填充。在这种情况下，父div的高度（在我的示例中称为
.quote wrapper
）将具有正确的高度，以便
上方或下方的元素不会与元素重叠


.quote包装器{
填充：40px0；
}
.quote包装。quote图像{
宽度：120px；
高度：100px；
位置：绝对位置；
}
/*将“位置”设置为“相对”，以便元素不会被图像重叠*/
.quote wrapper>p{
字体系列：AvenirLight；
颜色：#74818a；
字体大小：36px；
线高：45px；
字体：斜体；
填充：80px 0 0 80px；
保证金：0；
位置：相对位置；
}
Lorem ipsum door sit amet，一位杰出的领导者，他在劳动和生活中的时间是有限的。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡


“理解意味着能够有效沟通”

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为官方的过失而得到动物的劳动。
问题在于，在头衔上的位置是绝对的。对于所有分辨率和设备，我建议免费使用以下结构


.block quote{
显示：块；
保证金：0；
填充：20px 0 70px；
背景：url(https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png)0 0不重复；
}
氢{
字体系列：“AvenirLight”；
颜色：#74818a；
字体大小：36px；
线高：45px；
字体：斜体；
}

“理解意味着能够有效沟通”
Lorem ipsum dolor sit amet，是一位杰出的献身者。草蛉。Morbi酵母菌是一种优良的发酵剂，它的优点是暂时的。没有选择的余地，也没有选择的余地。前庭位于土耳其。维尼那提草。毛里斯坐在维尼纳蒂斯·维利特的旁边。我不知道该怎么办。Nam posuere lorem在est ultrices luctus

您有只适用于手机/小屏幕尺寸的样式吗？在浏览器和手机中检查元素时，应用于元素的样式是否存在差异？@Kaddath-Nope，因为我觉得我最初的方法是错误的。我编辑了我的答案来解释。引号必须设置为绝对位置还是可以更改为相对位置？我认为出现这种情况的原因是因为您假设大灰色文本的高度不会超过
50px
高度（cf
position:absolute；top:50px；
）但屏幕越小，文本越频繁地转到新行，并且变得越大。如果我有任何解决方案，我会更新