Comment fusionner les marges en CSS-tutoriel CSS-php.cn

Comment fusionner les marges en CSS

零到壹度

Libérer： 2018-04-04 15:26:45

original

2323 Les gens l'ont consulté

Cet article présente principalement comment réaliser la fusion des marges en CSS L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil.

La fusion des marges signifie : lorsque deux marges verticales se rencontrent, elles formeront une seule marge. La hauteur des
marges fusionnées est égale à la plus grande des hauteurs des deux marges fusionnées.

Le cas de la fusion des marges

Cas 1

Lorsqu'un élément apparaît au-dessus d'un autre élément, la marge inférieure du premier élément est la même que la marge inférieure de le deuxième élément. Les marges supérieures seront fusionnées.
Comment fusionner les marges en CSS

Cas 2

Lorsqu'un élément est contenu dans un autre élément (en supposant qu'il n'y ait pas de remplissage ou de bordure séparant les marges), leurs marges supérieure et/ou inférieure seront également être fusionnés.
Comment fusionner les marges en CSS
Cas

Cas 3

Les marges peuvent également être fusionnées avec elles-mêmes.
Supposons que vous ayez un élément vide, qui a des marges, mais pas de bordure ni de remplissage . Dans ce cas, la marge supérieure et la marge inférieure se rejoignent et fusionnent.
Comment fusionner les marges en CSS
Si cette marge rencontre la marge d'un autre élément, elle sera également fusionnée :

Éliminer la fusion des marges

Remarque : La fusion des marges ne se produira que pour les marges verticales des zones de bloc dans le flux de document normal. Les marges entre les cases en ligne, les cases flottantes ou les positionnées de manière absolue ne seront pas fusionnées.

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>消除外边距叠加</title>
    <style type="text/css">
    .wrap{        width: 200px;        height: 200px;        margin-top: 30px;        background-color: red;    }
    .inner{        width: 100px;        height: 100px;        margin-top: 20px;        background-color: blue;    }
    </style></head><body><p class="wrap">
        <p class="inner"></p></p></body></html>

Copier après la connexion

Comment fusionner les marges en CSS
Sur l'image ci-dessus, on peut clairement voir que les marges supérieures de l'élément parent et de l'élément enfant ont été fusionnées et que les bordures supérieures des deux se sont chevauchées. Nous savons tous que la hauteur de la marge fusionnée est égale à la plus grande des hauteurs des deux marges fusionnées. Mais ce qu'il faut noter ici est : Les marges fusionnées sont ajoutées à l'élément parent Cela peut être vu par le chevauchement des bordures supérieures de l'élément parent et de l'élément enfant.

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>消除外边距叠加</title>
    <style type="text/css">
    .wrap{        width: 200px;        height: 200px;        margin-top: 30px;        background-color: red;    }
    .inner{        width: 100px;        height: 100px;        margin-top: 20px;        background-color: blue;        //浮动子元素消除外边距合并        float: left;        //绝对定位消除
        /*position: absolute;*/
        //设置子元素为行内块元素
        /*display: inline-block;*/
        //上面三种方式任意一种都可以消除外边距合并
    }
    </style></head><body><p class="wrap">
        <p class="inner"></p></p></body></html>

Copier après la connexion

Éliminer la situation après la fusion des marges :
Comment fusionner les marges en CSS