"Technology" height is not suitable (the height of the outer object cannot be adjusted automatically when the height of the inner object is changed)

HTML section:

<div class= "Box2" > on </div>
<div id= "box" >
<p> content <br> content <br> content <br> content <br> content <br> content </p>
</div>
<div class= "Box2" > Under </div>

CSS section:

. box2{
Background-color: #ccc;
}
#box {
Background-color: #eee;
}
#box p{
margin:20px 0;
Text-align:center;
}

Note: When there is no requirement for 1px spacing, use one, law two, strict usage three

Law One:

#box {
Background-color: #eee;
border:1px solid #fff;/* Add code */
}

Law II:

#box {
Background-color: #eee;
padding:1px 0;/* Add code */
}

Fahsarm

HTML section:

<div class= "Box2" > on </div>
<div id= "box" >
<div class= "Clear-div" ></div>
<p> content <br> content <br> content <br> content <br> content <br> content </p>
<div class= "Clear-div" ></div>
</div>
<div class= "Box2" > Under </div>

CSS section:

. box2{
Background-color: #ccc;
}
#box {
Background-color: #eee;
}
#box p{
margin:20px 0;
Text-align:center;
}
. clear-div{
height:0;
Overflow:hidden;
}

"Technology" height is not suitable (the height of the outer object cannot be adjusted automatically when the height of the inner object is changed)