CSS中margin属性的偏移量详解（代码示例）

互联网 18-11-9

本篇文章给大家介绍一下CSS中margin属性的偏移量，有感兴趣的朋友可以看一看。

我们先来看一个具体的例子（相关推荐：CSS学习手册）

代码入下：HTML文件和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;   }

MarginFrame1 在底部设置40个像素的边距，MarginFrame2设置顶部的40个像素的边距。上框和下框之间的距离等于外框和上框之间的距离，从而不获取具有每个边缘的80像素的边缘，并且可以确认只有40像素的距离。

更改margin大小

编辑CSS文件并将MarginFrame 1下方的边距更改为60像素。

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

效果如下：你可以看到上下框架的距离变宽了。

设置float的值

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

效果如下：