Recently, while working on some CSS code, I encountered an interesting issue. I had wrapped an article within a div and assigned percentage widths to both elements, as well as added padding to the div. Strangely enough, the padding did not seem to be applied until I added a border to the article. When I commented out the border, the height of my article suddenly shrank. What could possibly be causing this unexpected behavior?
<style>
body{
margin:100px;
}
.content{
width:100%;
padding:.9746589%;
background:green;
}
.content>article{
width:100%;
background:yellow;
border:1px solid red;
}
</style>
<div class="content" role="main">
<article>
<p>This is my text!</p>
</article>
</div>