0

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?

Sempervivum
  • 928
  • 1
  • 9
  • 21
  • I believe you are confusing this with collapsing margins? – Rob Nov 30 '17 at 01:29
  • 2
    Possible duplicate of [How to disable margin-collapsing?](https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) – zer00ne Nov 30 '17 at 01:29
  • It has nothing to do with `margin-collapsing`, @zer00ne. – tao Nov 30 '17 at 01:45
  • I don't spend time analyzing a question if it doesn't have a [mcve]. If a question is given more effort, I'll do likewise. @AndreiGheorghiu – zer00ne Nov 30 '17 at 02:17
  • 2
    I understand that, @zer00ne. But should you be marking as duplicate a question you haven't analyzed enough to understand? Shouldn't moving on be the preferred action over a wrong action, reasons aside? – tao Nov 30 '17 at 02:21

2 Answers2

3

By default, <label>s have display:inline. Change it to display: inline-block and there go your "collapsing paddings".

While padding does affect the appearance of the element, its calculated height in the flow of content is dependent on line-height value. You either manually adjust that property to accommodate for the possible padding row items might have, so they never overlap, or you use display:inline-block.

line-height can be expressed in any "length"-type CSS units (px, em, in,...) but, unlike other length properties, accepts unit-less values, considering them em.

tao
  • 82,996
  • 16
  • 114
  • 150
-4

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;

Rob
  • 14,746
  • 28
  • 47
  • 65