Margin styles are creating unexpected behaviour in the new Image component

[harshvitra]

Bug report

Describe the bug

Margin styles are creating unexpected behaviour in the new Image component

Issue is because of position relative+absolute combination

The structure Image component creates -

<Image styles /> is replaced by

<div> // with the width passed to image
   <div> // position relative
       <img /> // position absolute with the margin and other styles
   </div>
</div>

Issue is that the margin along with other styles are passed to the img component which has absolute position so it spoils the designs

To Reproduce

Add margin to the Image component and see the unexpected behaviour

Expected behavior

Expected that the margin is applied to the parent div and not to child

In the case of Image component it should be applied to the Wrapper

Screenshots

Additional context

This can be added in the to do here
#18122

[lachlanjc]

+1. hackclub/scrapbook#117 & hackclub/scrapbook#115

[Timer]

Can you please try next@canary and see if it fixes your issue?

[lachlanjc]

Yep, already did! Thanks.

[Timer]

Closing as fixed on next@canary. Thanks!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.