2

I have the following HTML and CSS:

https://jsfiddle.net/vfeLxa35/

<div class="a">
  <p>Line 1</p>
  <p>Line 2</p>
</div>
<div class="b">
  <p>Line 1</p>
  <p>Line 2</p>
</div>

<style>
div.a {
  background: yellow;
  padding: 0px 5px;
}

div.b {
  background: grey;
  padding: 1px 5px;
}
</style>

The difference between the two paddings is just 1px, but the difference between the results is huge. What causes this?

Note: I'm asking: Why is this happening?

I'm not asking: How do I achieve <something>?

I know there are ways to work around this behaviour, but I want to understand why it even happens in the first place.

NeatNit
  • 526
  • 1
  • 4
  • 14

0 Answers0