Maison > Article > interface Web > Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

黄舟original: 2016-12-29 14:28:001207parcourir

Parlons du problème de la fusion des marges intérieures et extérieures

<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>

La marge inférieure du calque a est de 20px
Regardez l'image ci-dessous

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

Ensuite, changez la marge supérieure du calque vert en 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>

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

Aucune différence

En termes simples, la fusion des marges signifie que lorsque deux marges verticales se rencontrent, elles forment une seule marge. La hauteur de la marge fusionnée est égale à la plus grande des hauteurs des deux marges fusionnées.
En regardant la photo

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

Et si les deux avaient le même px ? S'ils font tous 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>

l'effet est toujours le même

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

Testez-le ci-dessous

<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>

affichage ie6

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

affichage Firefox

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

On voit que IE6 n'est pas fusionné, mais Firefox est fusionné

Certaines personnes peuvent être curieuses
Pourquoi la couleur rouge ne colle pas à la zone de navigation ci-dessus
En fait, aucun navigateur n'a de marges intérieures et extérieures par défaut

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

il suffit de

<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>

pour voir

Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)

Certains navigateurs peuvent avoir besoin d'utiliser

body{
margin:0;
padding:0;
}

Ce qui précède est le contenu du nouveau départ de la conception de mises en page Web div CSS (5) . Pour plus de contenu connexe, veuillez prêter attention à PHP Chinese Net (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Un nouveau départ pour la conception de mises en page de pages Web div CSS (4)Article suivant：Un nouveau départ pour la conception de mises en page de pages Web div CSS (4)

Articles Liés

Voir plus