I have a div block which contains an image and text:

```
<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>

```

I've applied `margin-bottom: 90px;` on the parent div to create a gap between the div and any `p` tags which may be below it.

It works fine on full display, but on mobile, it looks like this:

As you can see, it's overlapping the following `p` tags after the `div`. How can I fix this? Ideally I want a `20px` gap between the parent div and anything outside the div.

Edit:

I feel like my approach is wrong. I.e. if I remove `margin-bottom: 90px;` from the code above, the div will still overlap any following `p` tags: