<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/test.css">
<style>
*{
margin: 0;
padding:0;
}
div{
background-color:lightblue;
}
p{
margin: 40px;
background-color:black;
color: white;
width:200px;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consecte
</p>
</div>
</body>
</html>
When I add "overflow:auto" in div stylesheet, it shows:
While without this line, it shows:
Except making div block BFC by overflow:auto, specifying border or padding value can reach the same result.
Before specifying the border attribute, the shape of div relies on its child which is the <p> block. so the top of <p> and <div> are same even there is a margin value of <p>.
By specifying the border or padding-top which can shape div. that why the gap eliminated.
But I can not figure out why making div BFC still have the same effect.
anyone can explain this to me?
