嘿，前端侠士们！当我们谈论网页布局时，脑子里肯定会蹦出Padding（内边距）和Margin（外边距）这对双胞胎。如果说Padding是元素给自己加的内衬，那Margin就是它为自己划定的“私人领地”。这个领地可太重要了，它决定了元素是否挤成一团、是否优雅居中、是否与世无争。
今天，我们就来把Margin这位“社交达人”扒得底裤都不剩，看看它到底有多少隐藏技能和让人又爱又恨的臭脾气！
第一章：初识Margin——元素的“舒适圈”
简单来说，margin属性用于在任何定义的边框（border）之外，围绕元素创建外部空间。它不影响元素本身的大小，但会影响元素与其他元素的距离，从而控制整个布局。
1.1 基础语法与写法
给元素设置外边距的方法多到让你眼花缭乱：
- 单值写法：
margin: 20px;
-
- 含义：上下左右全是20px。简单粗暴，一碗水端平。
- 双值写法：
margin: 20px 40px;
-
- 含义：上下为20px，左右为40px。记住了，第一个值是上下，第二个是左右。
- 三值写法：
margin: 10px 30px 20px;（极少用）
-
- 含义：上10px，左右30px，下20px。
- 四值写法：
margin: 10px 20px 30px 40px;
-
- 含义：从上开始，按顺时针方向：上(10px)、右(20px)、下(30px)、左(40px)。口诀：“上右下左”，就像顺时针拧一个瓶盖。
- 单边设置： 如果你是个细节控，还可以精准打击：
-
margin-top: 上外边距margin-right: 右外边距margin-bottom: 下外边距margin-left: 左外边距
示例1：基础Margin展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
最低0.47元/天 解锁文章
扫一扫
751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
