Custom HTML block preview not same as the Frontend Views

[AlgorithmsUnlocks]

Description

Custom HTML block preview not same as the Frontend Views

Step-by-step reproduction instructions

To reproduce the issue, you will need to follow the steps:

1. Activate the Twenty-Fourteen theme.
2. Choose the custom HTML block.
3. Add a few heading tags to it.
4. Check the preview in the HTML block and also the Frontend View

Screenshots, screen recording, code snippet

https://prnt.sc/72nMe8HmIr_S
https://prnt.sc/1dV9rgwAsEIS

Environment info

WordPress Version: 6.2.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[sabernhardt]

originally reported in Trac 58463

All direct child elements inside the block preview's div have no top or bottom margin.

gutenberg/packages/components/src/sandbox/index.tsx

Lines 109 to 112 in aaf6f8f

	body > div > * {
	margin-top: 0 !important; /* Has to have !important to override inline styles. */
	margin-bottom: 0 !important;
	}

[skorasaurus]

Thanks for reporting; I believe this is a duplicate of #35962 which has the same issue (the HTML block's preview does not have any margin)