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.