Incorrect spacing between the placeholder and the buttons (2em total, instead of 1em = 13px). Remove top margin from buttons and add bottom margin on preview, or remove bottom margin on placeholder to fix.
Confirmed this is the case. Looks like the HTML structure is different for the existing media elements in the Customizer, and the widgets. For example, here's the header image:
<div class="attachment-media-view">
<div class="placeholder">No video selected</div>
...
</div>
Since .placeholder is applied to a <p> instead of a <div>, it inherits extra margins from the default <p> styling. We should change this to a <div> to match the existing structure.
That said, I'd like to see about tweaking these styles Customizer-wide in core, since I do think that the lack of margin makes the placeholder feel cramped.
Reported by @celloexpressions:
Confirmed this is the case. Looks like the HTML structure is different for the existing media elements in the Customizer, and the widgets. For example, here's the header image:
Here's the image widget:
Since
.placeholder
is applied to a<p>
instead of a<div>
, it inherits extra margins from the default<p>
styling. We should change this to a<div>
to match the existing structure.That said, I'd like to see about tweaking these styles Customizer-wide in core, since I do think that the lack of margin makes the placeholder feel cramped.