Can anyone help me troubleshoot this code? It seems to only work with the !important rule, which I prefer not to use. I believe there must be a way to achieve the desired outcome without relying on it.
What's intriguing is that the CSS line in question comes after all the other styles (which should normally take precedence and override previous declarations).
Check out the live demo here on jsFiddle.
Here is the HTML Structure:
<div id="body">
<div class="box">
<p>...</p>
</div>
<p>...</p>
</div>
And here is the CSS Code:
#body{
padding:18px 35px;
}
#body p{
margin-bottom:18px;
}
.box{
background:#ddd;
border:1px solid #000;
padding:5px;
}
.box p{
margin:0;/*works with !important*/
}