[Headers][Enhancements] Headers inside segments with a dimmer shouldn’t have margins when they’re the only children

[Kjaal]

When adding an absolute object like a dimmer to a segment that contains a header, the header thinks it's supposed to put a margin on itself in order to stay above the content ie. the dimmer.

This CSS
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top: 0; }
and
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child { margin-bottom: 0; }
Is what disables the margins on the header if it's the only element in the div ie. the segment.

My suggestion would be to allow the header to look like this

<h2 class="compact header">Header content</h2>
This would always have margin: 0

Simple fiddle

[awgv]

Hi, please provide a test case as per our contributing guidelines; you can fork this JSFiddle.

[Kjaal]

@Banandrew Updated with test case

[Kjaal]

@Banandrew Same goes for headers with floated buttons: Example

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.