A new beginning for div+css web page layout design (5)-CSS Tutorial-php.cn

A new beginning for div+css web page layout design (5)

黄舟

Release： 2016-12-29 14:28:00

Original

1203 people have browsed it

Let’s talk about the problem of merging inner and outer margins

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Copy after login

The lower margin of layer a is 20px
Look at the picture below

A new beginning for div+css web page layout design (5)

Let’s change the top margin of the green layer to 10px

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Copy after login

A new beginning for div+css web page layout design (5)

There is no difference

Simply put, Margin merging means that when two vertical margins meet, they form a single margin. The height of the merged margin is equal to the greater of the heights of the two merged margins.
Looking at the picture

A new beginning for div+css web page layout design (5)

What if the two have the same px? If they are all 20px

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:20px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Copy after login

the effect is still the same

A new beginning for div+css web page layout design (5)

Let’s test it

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:100px;
background:red;
margin-top:20px;
}
#b{
width:50px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"><div id="b"></div></div> 
</body>
</html>

Copy after login

ie6 display

A new beginning for div+css web page layout design (5)

##Firefox display

A new beginning for div+css web page layout design (5)

It can be seen that ie6 is not merged, but Firefox is merged

Some people may be curious
Why the red color is not close to the browsing box above
In fact, no browser is With default inner and outer margins

A new beginning for div+css web page layout design (5)

just need to

<html>
<head>
<style type="text/css"> 
*{
margin:0;
padding:0;
} #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Copy after login

see

A new beginning for div+css web page layout design (5)

Some browsers may need to use

body{
margin:0;
padding:0;
}

Copy after login

The above is the content of a new beginning of div+css web layout design (5). For more related content, please pay attention to the PHP Chinese website (www.php.cn )!