On this code sample,
When I delete the padding on the element with an id of #a, the blue element moves up, and vice versa.
But when I inspect the margins and padding in the Chrome dev tools, it looks like they shouldn't affect each other at all!
Why is the padding of the red element affecting the VERTICAL positioning of the blue element?
I understand why it would affect the horizontal, but the vertical change confuses me!
I've looked into the CSS box model, but it hasn't helped.
* {
font-size: 20px;
}
#a {
background-color: red;
display: inline-block;
box-sizing: border-box;
height: 100px;
width: 150px;
padding: 30px;
}
#b {
background-color: blue;
display: inline-block;
}<div id="a">
CONTENT
</div>
<div id='b'>
CONTENT
</div>I expect that changing the padding of the red el wouldn't affect the positioning of the blue el at all!
