How can we solve the problem of overlay margins ?, Outer margin overlay
First
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "Author" content = "Hu Chao">
<Title> super Hu </title>
<Style>
# A1 {
Width: 200px;
Height: 200px;
Border: 1px solid red;
Margin-bottom: 20px;
}
# A2 {
Margin-top: 20px;
Width: 100px;
Height: 100px;
Display: inline-block;/* or absolute position (position: absolute) or floating element */
Border: 1px solid black;
}
</Style>
</Head>
<Body>
<Div id = "a1">
</Div>
<Div id = "a2">
</Div>
</Body>
Second
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "Author" content = "Hu Chao">
<Title> super Hu </title>
<Style>
# Container {
Overflow: hidden;
Zoom: 1;
}
# A1 {
Border: 1px solid red;
Width: 200px;
Height: 200px;
Background: green;
Margin-bottom: 20px;
}
# A2 {
Border: 1px solid red;
Width: 200px;
Height: 200px;
Background: red;
Margin-top: 20px;
}
</Style>
</Head>
<Body>
<Div id = "container">
<Div id = "a1">
</Div>
</Div>
<Div id = "container">
<Div id = "a2">
</Div>
</Div>
</Body>
</Html>
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
