Twenty Seventeen: Floated Images appear with extra space on top on the front end.

[kjellr]

Ported over from Gutenberg's repo, since this is a Twenty Seventeen issue:
​https://github.com/WordPress/gutenberg/issues/14782

Steps to reproduce

1. Create a new page, add an image block and insert image.
2. Add a paragraph block below with text.
3. Resize image and change to left alignment. Text wraps around image.
4. Preview/publish

What I expected

Expected the image and text to be almost exactly aligned, as it appears in the editor.

What happened instead

When previewed/published, the first line of text has a gap above it.

Workaround: Adding an empty paragraph block above the image block removes the gap.

Browser / OS version

Chrome Version 73.0.3683.86
macOS Mojave 10.14.3

---

Screenshots

Page creation:

Before adding empty paragraph block:

Empty paragraph block applied in editor:

After adding empty paragraph block:

[sabernhardt]

The gap seems to occur only when the aligned image is the first block, so I used :first-child in the patch. This patch also removes the 0.5em top margin from these blocks (overriding 'block-library' styles).