Maison > Article > interface Web > Explication détaillée du décalage de l'attribut margin en CSS (exemple de code)

Explication détaillée du décalage de l'attribut margin en CSS (exemple de code)

不言original: 2018-11-09 13:44:564073parcourir

Cet article vous présentera le décalage de l'attribut margin en CSS. Les amis intéressés peuvent y jeter un œil.

Sans plus tard, allons droit au but~

Regardons d'abord un exemple précis (recommandations pertinentes : Manuel d'apprentissage CSS)

Entrez le code ci-dessous : fichier HTML et fichier CSS.

MarginCollapsing01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="MarginCollapsing01.css" />
  </head>
  <body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">php中文网margin属性的偏移量</div>
    <div class="MarginFrame2">php中文网</div>
  </div>
  </body>
  </html>

MarginCollapsing01.css

.BaseCanvas {
  margin-left: 32px;  
  margin-right: 32px;  
  margin-top: 32px;  
  width: calc(100%-64px);  
  height: 320px;  
  background-color: #E0E0E0;  
  border: solid 1px #202020;
  }
.MarginFrame1 {
  width: 80%;  
  background-color: #fff2a9;  
  border: solid 1px #ff6a00;  
  margin-top: 40px;  
  margin-bottom: 40px;  
  margin-left: 12px;  
  margin-right: 8px;
  }
.MarginFrame2 {
  width: 80%;  
  background-color: #9effb5;  
  margin-top: 40px;  
  margin-bottom: 40px;  
  margin-left: 12px;  
  margin-right: 8px;
  }

L'effet est le suivant :

MarginFrame1 Définir 40 pixels à les marges inférieures, MarginFrame2 définit les 40 premiers pixels de la marge. La distance entre les cadres supérieur et inférieur est égale à la distance entre les cadres extérieur et supérieur, de sorte que vous n'obtenez pas de bord avec 80 pixels par bord, et vous pouvez confirmer qu'il n'y a qu'une distance de 40 pixels.

Explication détaillée du décalage de lattribut margin en CSS (exemple de code)

Modifier la taille de la marge

Modifiez le fichier CSS et modifiez la marge en dessous de MarginFrame 1 à 60 pixels.

MarginCollapsing01.css

.BaseCanvas {
  margin-left: 32px;  
  margin-right: 32px;  
  margin-top: 32px;  
  width: calc(100%-64px);  
  height: 320px;  
  background-color: #E0E0E0;  
  border: solid 1px #202020;
  }
.MarginFrame1 {
  width: 80%;  
  background-color: #fff2a9;  
  border: solid 1px #ff6a00;  
  margin-top: 40px;  
  margin-bottom: 60px;  
  margin-left: 12px;  
  margin-right: 8px;
  }
.MarginFrame2 {
  width: 80%;  
  background-color: #9effb5;  
  margin-top: 40px;  
  margin-bottom: 40px;  
  margin-left: 12px;  
  margin-right: 8px;
  }

L'effet est le suivant : Vous pouvez voir que la distance entre les cadres supérieur et inférieur est devenue plus large.

Explication détaillée du décalage de lattribut margin en CSS (exemple de code)

Définir la valeur de float

Le code est le suivant :

MarginCollapsing02.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="MarginCollapsing02.css" />
  </head>
  <body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">框架1</div>
    <div class="MarginFrame2">框架2</div>
    <div class="MarginFrame3">框架3</div>
    <div class="MarginFrame4">框架4</div>
  </div>
  </body>
  </html>

MarginCollapsing02.css

.BaseCanvas {
  margin-left: 32px;  
  margin-right: 32px;  
  margin-top: 32px;  
  width: calc(100%-64px);  
  height: 320px;  
  background-color: #E0E0E0;  
  border: solid 1px #202020;
}
.MarginFrame1 {
  width: 160px;  
  float: left;  
  background-color: #fff2a9;  
  border: solid 1px #ff6a00;  
  margin-top: 32px;  
  margin-bottom: 48px;  
  margin-left: 24px;  
  margin-right: 24px;
}
.MarginFrame2 {
  width: 160px;  
  float: left;  
  background-color: #fff2a9;  
  border: solid 1px #ff6a00;  
  margin-top: 32px;  
  margin-bottom: 48px;  
  margin-left: 24px;  
  margin-right: 24px;
}
.MarginFrame3 {
  width: 160px;  
  float: left;  
  background-color: #fff2a9;  
  border: solid 1px #ff6a00;  
  margin-top: 32px;  
  margin-bottom: 48px;  
  margin-left: 24px;  
  margin-right: 24px;
}
.MarginFrame4 {
  width: 160px;  
  float: left;  
  background-color: #fff2a9;  
  border: solid 1px #ff6a00;  
  margin-top: 32px;  
  margin-bottom: 48px;  
  margin-left: 24px;  
  margin-right: 24px;
}

L'effet est le suivant :

Explication détaillée du décalage de lattribut margin en CSS (exemple de code)

Cet article se termine ici, veuillez vérifier plus de contenu connexe Suivez la colonne Tutoriel vidéo CSS du site Web chinois php ! ! !

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!

php css html Float margin

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：Comment utiliser les requêtes multimédias en CSS pour un design réactif ? (Exemple d'explication détaillée)Article suivant：Comment utiliser les requêtes multimédias en CSS pour un design réactif ? (Exemple d'explication détaillée)

Articles Liés

Voir plus