How to prevent collapsing paddings

Question

Never heard about collapsing paddings till now but I encounter a curious effect:
https://jsfiddle.net/Sempervivum/vbkL69k1/
When the viewport is narrow so that the labels wrap, the lower labels cover the upper ones a bit.

HTML:

<div class="tabbed">

    <label for="tabbed1">Standardfarben1</label>

    <label for="tabbed2">Standardfarben2</label>

    <label for="tabbed3">Standardfarben3</label>

    <label for="tabbed4">Standardfarben4</label>

</div>

CSS:

        .tabbed label {

            border: 1px solid #ddd;

            border-bottom: none;

            border-top-left-radius: 4px;

            border-top-right-radius: 4px;

            padding: 0.25em 0.75em;

            box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);

            background: #fff;

            cursor: pointer;

            box-sizing: border-box;

         }

(Of course in the original code the corresponding inputs are there.)
None of the measures recommended for preventing margin collapse helps.
What is the explanation for this effect and how can I fix it?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

This is not a collapsing margin problem (or even a collapsing padding). <label> has no line height set for it so you just need to set an appropriate line height such as line-height:1.5;

How to prevent collapsing paddings

Sign up