Padding on span element push it above container

Question

I have two questions:

Why does padding on inline elements work I have read that padding on inline element should not work.
Why does the padding push the span above the div container:

body > div {
    width: 150px;
    height: 150px;
    background: black;
    margin-top: 40px;
    display: inline-block;
    vertical-align: bottom;
}

div > div,
div > span{
    border-radius: 5px;
    padding: 10%;
    background: red;
}

<div>
  <div>
  </div>
</div>
<div>
  <span>
  </span>
</div>

score 1 · Accepted Answer · answered Aug 09 '21 at 15:05

It's not that padding doesn't apply at all to inline elements, rather that their top and bottom values won't be taken into account as far as "pushing away" content in preceding/successive lines. More on that here.

body>div {
  width: 150px;
  height: 150px;
  background: black;
  margin-top: 40px;
  display: inline-block;
  vertical-align: bottom;
  color: white;
}

div>div,
div>span {
  border-radius: 5px;
  padding: 10%;
  background: red;
}

<div>Lorem ipsum dolor sit amet consectetur
  <div>Lorem ipsum dolor</div> consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet consectetur <span>Lorem ipsum dolor</span> consectetur adipisicing elit.</div>

Padding on span element push it above container

1 Answers1