Sempervivum Sempervivum - 3 years ago 198
CSS Question

How to prevent collapsing paddings

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


<div class="tabbed">
<label for="tabbed1">Standardfarben1</label>
<label for="tabbed2">Standardfarben2</label>
<label for="tabbed3">Standardfarben3</label>
<label for="tabbed4">Standardfarben4</label>


.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?

Rob Rob
Answer Source

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;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download