The code is as follows:
<style type= "Text/css" >
*{margin:0;padding:0;}
p{border:1px #66CC00 Solid;}
IMG {
width:40px;
height:40px;
Float:left;
border:1px #66CC00 Solid;
}
h3{
Clear:both;
border:1px #66CC00 Solid;
}
div{padding:20px;width:400px;height:400px;}
</style>
<body>
<div>
<p> I'm on top </p>
</div>
Effect:
Set the margin-top for H3 to try:
The code is as follows:
h3{
Clear:both;
border:1px #66CC00 Solid;
margin-top:30px;
}
Look at the effect:
No change, clear area at work, change:
The code is as follows:
h3{
Clear:both;
border:1px #66CC00 Solid;
margin-top:60px;
}
Effect:
With 16px spacing, we can understand that the margin is calculated relative to the "I am Above", which is actually the area of the cleanup, and we can simply set it up:
The code is as follows:
<style type= "Text/css" >
*{margin:0;padding:0;}
p{border:1px #66CC00 Solid;}
IMG {
width:40px;
height:40px;
Float:left;
border:1px #66CC00 Solid;
margin-bottom:20px;
}
h3{
Clear:both;
border:1px #66CC00 Solid;
}
div{padding:20px;width:400px;height:400px;}
</style>
<body>
<div>
<p> I'm on top </p>
</div>
Effect:
The effect is ideal!
Setting the outer margin for a floating element, rather than setting the outer margin for "I am Below" (clear Element), solves the problem!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
