I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS.
<div id="main">
<div id="internal">
hello
</div>
</div>
The CSS for the "main" id is as follows:
#main
{
height:80px;
background-color:black;
border:1px solid green;
}
And the CSS for the "internal" id is:
#internal
{
height:40px;
background-color:red;
margin-top:30px
}
You can view the code on JSFiddle HERE
The margin-top property in the internal div behaves differently depending on whether the main div has a border or not. If the border is removed from the main div, the margin-top works in an unexpected way. I'm struggling to understand this behavior. Can someone please provide some insights?