Detailed explanation of offset of margin attribute in CSS (code example)-CSS Tutorial-php.cn

Detailed explanation of offset of margin attribute in CSS (code example)

不言

Release： 2018-11-09 13:45:20

Original

4176 people have browsed it

This article will introduce to you the offset of the margin attribute in CSS. Interested friends can take a look.

Without further ado, let’s get straight to the point~

Let’s look at a specific example first (related recommendations: CSS Learning Manual)

Enter the code below: HTML file and CSS file.

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>

Copy after login

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

Copy after login

The effect is as follows:

MarginFrame1 sets a margin of 40 pixels at the bottom, MarginFrame2 Set a top margin of 40 pixels. The distance between the upper and lower frames is equal to the distance between the outer and upper frames so that you don't get an edge with 80 pixels per edge and you can confirm that there is only a distance of 40 pixels.

Detailed explanation of offset of margin attribute in CSS (code example)

Change margin size

Edit the CSS file and change the margin below MarginFrame 1 to 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;
  }

Copy after login

The effect is as follows: You can see that the distance between the upper and lower frames has become wider.

Detailed explanation of offset of margin attribute in CSS (code example)

Set the value of float

The code is as follows:

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>

Copy after login

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

Copy after login

The effect is as follows:

Detailed explanation of offset of margin attribute in CSS (code example)

This article ends here. For more related content, please pay attention to php Chinese website The CSS video tutorial column! ! !

The above is the detailed content of Detailed explanation of offset of margin attribute in CSS (code example). For more information, please follow other related articles on the PHP Chinese website!