2

I though I knew how inline elements worked. A nice answer explaining it can be found here: CSS display: inline vs inline-block.

What it says about inline elements:

  1. respect left & right margins and padding, but not top & bottom

Inline elements only support right and left padding and ignores any padding given for top and bottom. But doing some tests I just found a really odd behaviour. When given a padding to an inline element, it applies it to the left and right of the element but also to the bottom but not to the top.

Is there any explanation for this behaviour?

<html>
    <head>
        <style>
            * {
                box-sizing: border-box;
                padding:0;
                margin:0;
            }
            .parent{
                display:inline;
                background-color: red;
                padding: 10rem;
                color:white;
            }
        </style>
    </head>
    <body>
        <div class="parent">Whatever</div>
    </body>
</html>
Notbad
  • 5,936
  • 12
  • 54
  • 100

1 Answers1

2

Use the browser tools to inspect the element and you'll see that there is also a padding-top of 10em, which is not visible in your snippet.

The reason: Although there is a padding for inline elements, it does not affect the distance above and below it - the line (i.e. baseline for the text) is at the same vertical position where it would be (or better: is) without the padding. The padding here just creates an overflowing area which you only see if there is a background defined.

See my snippet, where I added a wrapper with a 12em padding-top and some text before and after the inline div, and also before and after the wrapper div which demonstrates what happens.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrap1 {
  padding-top: 12em;
  background: green;
  /* display: block; is the default here */
}

.parent {
  display: inline;
  background-color: red;
  padding: 10rem;
  color: white;
}

.y {
  background: rgba(255, 255, 0, 0.4);
  border-radius: 50%;
  padding: 0.6em 0.15em 0.6em 0.1em;
}
<body>
  <div>This is in a separate div which preceds the inline div and its wrapper.</div>
  <div class="wrap1">
    this is on the same the line
    <div class="parent">Whatever</div> yes it is
  </div>
  <div>And this is in a separate div following the inline div and its wrapper.</div>
  <p>And here is another line with one (inline) <span class="y">word</span> that has a padding in a way that <em>might</em> be considered useful.</p>
</body>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Sometimes it seems HTML/CSS creators were drunk when designing the behaviours of some properties. Can't see how this would be useful. It seems more some kind of side effect. Thanks for the explanation. – Notbad Jul 01 '21 at 23:55
  • 1
    well, yes and no: I added something to my snippet where that behaviour *might* be desired (rounded text highlighting without affecting the line distance). – Johannes Jul 02 '21 at 00:04