When considering the scenario presented in the original post, one solution would be to exclude the :first-child rule and include:
#content {
margin-top: 1em;
}
This adjustment could result in the margins of the #content element collapsing with those of the h1 if there is no text preceding the heading. However, if there is preceding text, the h1 would maintain a separate top margin. To achieve desired positioning, it may be necessary to modify the bottom padding or margin of the preceding element. Alternatively, incorporating a ::before pseudo-element with a negative margin could effectively cancel out the container's margin:
#content:before {
display: block;
margin-top: -1rem;
content: ' ';
}
It should be noted that adjustments may be required if the h1 has a different font-size, necessitating consideration for variations in measurement units such as rem or px.
In certain situations where there is content before a floated img within a <p> container (such as in WordPress-generated material), applying top-margin can prove challenging due to the lack of margin collapse between floated elements and their containers. Unfortunately, the answer to addressing this specific issue remains elusive.