How Can I Prevent a Child Div\'s Margin from Affecting a Borderless Parent Div\'s Height?

CSS: Margin-Top and Borderless Parent Div

In the scenario described, a child orange div is set with a 30px top margin within a green parent div that lacks a top border. The issue arises when the margin pushes the parent div downwards, even though a top border is not desired.

To resolve this, while maintaining the borderless parent div, consider implementing the following:

.body {
    overflow: auto;
}

By adding "overflow: auto" to the parent div ".body," you invoke the browser's collapsing margin behavior. This allows the child div's top margin to be contained within the parent div without extending beyond its boundaries.

This approach ensures that the green div remains borderless while preventing margin-collapsing, allowing for proper positioning of the child orange div without causing unwanted shifts in the parent div's height.

The above is the detailed content of How Can I Prevent a Child Div\'s Margin from Affecting a Borderless Parent Div\'s Height?. For more information, please follow other related articles on the PHP Chinese website!