Un nouveau départ pour la conception de mises en page de pages Web div CSS (5)-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

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

Dec 29, 2016 pm 02:28 PM

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

l'effet est toujours le même

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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 de ce site Web

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