One thing that puzzles me is the behavior of the display property in CSS. Why is it that setting {display: flex} for a div will apply this style to all nested p elements within the div? It seems like {display: flex} might be an inherited property, but I'm not entirely sure. On the other hand, when I try to set {display: inline} for a div, the same cascading effect doesn't occur and the style only applies to the p elements directly inside the div. Can someone explain why this happens?
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
CSS:
div {
display: inline;
}
You can check out my code here: https://codepen.io/Eva255/pen/OJMNpBe