Viewing backend <-> frontend. Image too close to another image.

[paaljoachim]

Describe the bug
Here is the backend of the page that I am creating:

Here is the frontend:

Even though I added a block with an image in it below the Polly Higgins image. The second image is nudging it self upward to the empty area that was beside the Polly image and just below the text. So it gets pulled together.

To Reproduce
Steps to reproduce the behavior:

1. Add an image. Then add some text.
2. Align image to the left. Then align text to the left.

3. Go into the text box and click enter a few times to move below the image.
4. Add something there. I added an audio block. One can also add another image.
5. Save and view the page. See if the image/audio etc has moved upward to just below the existing text to the right of the image.

Expected behavior
I expected to see the second image below the Polly Higgins image. Not up beside it.

Btw I went ahead and added a spacer block to push the image further down. So that it does not sit up to the Polly image.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: OSX 10.13.6
• Browser Chrome and Desktop Server
• Gutenberg version 4.1.1

Additional context
In relation to alignment of text and image: #11445

[youknowriad]

Thanks for the report.

I don't see any issue from the screenshots, that's just how float positionning works . If there's enough place, you image or any other block will show up next to the floated item. The difference is that the available width in the frontend and the backend is not the same (The theme editor styles could align the widths).

I suggest adding a custom className to your second image and apply

.my-image {
   clear: both;
}

[youknowriad]

Closing, let me know if you need more help.

[paaljoachim]

Thanks Riad!