Problèmes de superposition de bordure de marge et solutions en CSS

Cet article vous présentera le problème et la solution de superposition des limites de marge en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comprenez-vous le concept de superposition de bordure de marge en CSS ? Permettez-moi de partager avec vous lorsqu'un élément apparaît au-dessus d'un autre élément, la bordure inférieure du premier élément est la même que la bordure supérieure du premier élément. Le deuxième élément se superpose.

Analyse approfondie de la superposition de bordure de marge CSS

Introduction à la superposition de bordure

La superposition de bordure est un concept assez simple . Cependant, cela peut créer beaucoup de confusion lors de la mise en page des pages Web dans la pratique. En termes simples, lorsque deux frontières verticales se rencontrent, elles forment une frontière. La hauteur de cette limite est égale à la plus grande des hauteurs des deux limites superposées.

Lorsqu'un élément apparaît au-dessus d'un autre élément, la bordure inférieure du premier élément chevauche la bordure supérieure du deuxième élément, comme indiqué dans l'image :

◆La bordure supérieure d'un élément chevauche la bordure inférieure de l'élément précédent

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 la bordure), leur haut et/ou la bordure inférieure se chevauche également, comme le montre l'image :

◆La bordure supérieure de l'élément chevauche la bordure supérieure de l'élément parent

Bien qu'à première vue cela semble un peu bizarre, la bordure peut même se chevaucher. Supposons que vous ayez un élément vide, qu'il ait une bordure, mais pas de bordure ni de remplissage. Dans ce cas, la bordure supérieure et la bordure inférieure se touchent et elles se chevaucheront, comme le montre l'image :

◆Les bordures supérieure et inférieure de l'élément se chevauchent

Si cette limite touche la limite d'un autre élément, elle se chevauchera également. Voir l'image :

◆La limite superposée de l'élément vide est la. identique à celui d'un autre élément. Les bordures d'un élément vide se chevauchent

C'est pourquoi une série d'éléments de paragraphe vides prennent très peu de place, car toutes leurs bordures se chevauchent pour former une petite bordure.

La superposition des bordures peut sembler un peu étrange au début, mais elle a du sens. Prenons, par exemple, une page de texte typique composée de plusieurs paragraphes (voir Figure 2-8). L'espace au-dessus du premier paragraphe est égal à la marge supérieure du paragraphe. Sans superposition de bordure, la bordure entre tous les paragraphes suivants serait la somme des bordures supérieure et inférieure adjacentes. Cela signifie que l'espace entre les paragraphes est deux fois plus grand que le haut de la page. En cas de chevauchement des bordures, les bordures supérieure et inférieure entre les paragraphes se chevauchent afin que la distance soit cohérente partout.

◆La superposition de bordure maintient une distance constante entre les éléments

La superposition de bordure ne se produit qu'au niveau des bordures verticales des zones de bloc dans le flux normal de documents. Les limites entre les cases en ligne, les cases flottantes ou les cases en position absolue ne se chevauchent pas.

Le problème de la superposition des bordures

La superposition des bordures est une fonctionnalité CSS qui peut causer beaucoup de problèmes si elle est mal comprise. Veuillez vous référer à l'exemple simple d'un paragraphe imbriqué dans un élément p :

<div id="box"> 
<p>Thisparagraphhasa20pxmargin.</p> 
<div>

La boîte p est définie avec une bordure de 10 pixels et le paragraphe est défini avec une bordure de 20 pixels :

#box{  
   margin:10px;  
   background-color:#d5d5d5;  
}  
p{  
   margin:20px;  
   background-color:#6699ff;  
}

Vous penserez naturellement au style obtenu comme indiqué dans la figure 1-1, avec une distance de 20 pixels entre le paragraphe et le p, et une bordure de 10 pixels autour de l'extérieur du p.

Figure 1-1

Cependant, le style résultant ressemble en réalité à la figure 1-2.

Figure 1-2

Deux situations se sont produites ici. Premièrement, les bordures supérieure et inférieure de 20 pixels du paragraphe se chevauchent avec la bordure de 10 pixels du p pour former une seule bordure verticale de 20 pixels. Deuxièmement, ces limites ne sont pas entourées par p, mais dépassent au-delà du haut et du bas de p. Cela se produit en raison de la façon dont les éléments qui ont des enfants au niveau du bloc calculent leur hauteur.

如果元素没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

为了让前面的示例看起来像图1-1这样，只需在p周围添加补白或边框：

#box{  
   margin:10px;  
   padding:1px;/*或者border:1pxsolidcolor;*/  
   background-color:#d5d5d5;  
}  
p{  
   margin:20px;  
   background-color:#6699ff;  
}

边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

补充解决方案：

1.外层padding

2.透明边框border:1pxsolidtransparent;

3.绝对定位postion:absolute:

4.外层poverflow:hidden;

5.内层p　加float:left;display:inline;

6.外层p有时会用到zoom:1;

以上就是本篇的全部内容，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap视频教程！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!