实例
设置一个p元素的所有四个边距：
p
{
margin:2cm 4cm 3cm 4cm;
}
属性定义及使用说明
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
实例:
2024年09月01日
实例
设置一个p元素的所有四个边距：
p
{
margin:2cm 4cm 3cm 4cm;
}
属性定义及使用说明
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
实例:
2024年09月01日
实例
设置一个p元素的右边距：
p
{
margin-right:2cm;
}
属性定义及使用说明
margin-right属性设置元素的右边距。
注意： 负值是允许的。
2024年09月01日
好程序员web前端培训分享CSS不同元素margin的计算：
行内级元素
Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0
Inline,置换元素:同上
Inline-block,置换元素在文档流中:同上
2024年09月01日
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
* {
margin: 0;
}
.mask {
background-color: #7b7070;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
margin-top: -100px;
background-color: #fff;
height: 200px;
width: calc(100% - 50px); //这里是水平居中的关键 margin-left = 50/2
margin-left: 25px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<div class="mask"></div>
<div class="box">
<p>title</p>
</div>
</div>
</body>
</html>
2024年09月01日
margin 外边距（标签与标签之间的距离）
margin的四个方向
margin-top 上边距
margin-right 右边距
2024年09月01日
我们先分析一下整个网页的结构，整体内容采用的是一个两列布局，导航无限延长的背景，并且添加了分割符号
素材：
第一步： 去掉默认的HTML间距。
*{padding:0;margin:0;}
Ps(我们可以在后期进行修改,根据网页中使用的HTML元素的个数如body,h1,div等)
2024年09月01日
好程序员web前端分享css的margin学习笔记。
Margin的特性
margin始终是透明的。
margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin-bottom、margin-left。
2024年09月01日
原文：https://www.smashingmagazine.com/2019/07/margins-in-css/
译者：前端小智
为了保证的可读性，本文采用意译而非直译。