Home > front end >  Landing the problem
Landing the problem

Time:12-15

<style>
The father {
Width: 400 px;
height: 400px;
Background - color: skyblue;
/* margin: 200 px; */
text-align: center;
/* overflow: hidden; */
}
The son {
width: 100px;
height: 100px;
Background - color: thistle;
Margin: 50 px;
overflow: hidden;
}
</style>

<body>




Why give child element to add overflow effect of separated and add to the parent element is ok?

CodePudding user response:

This is because the collapse of the margin, margin - top affected father son, so there will be a parent element downward migration 10 px, set the overflow property to the parent element, will force loading the height of the child elements, so the effect of the separated, add overflow attributes, child elements will affect the child elements of child elements, will not affect the parent element, want to achieve the effect of the separated by 1, delete the parent child elements of the overflow, to the parent element to add a border line==& gt; Border: 1 px solid # FFF, or the parent element to use padding - top: 10 px can, there are a number of methods, hope to adopt
  • Related