CSS padding margin border属性讲解_padding: 36px 20px 36px 0;-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53372088/article/details/120613951

本文详细介绍了CSS盒模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个区域。通过控制这些属性，设计师可以精确布局网页元素。例如，margin用于设置元素间的距离，而padding则控制内容与边框之间的空间。此外，文章还提到了margin的auto属性，用于实现元素的水平居中。了解并熟练应用盒模型对于前端开发者至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把所有网页上的对象都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域：
内容（content）
内边距（padding）
边框（border）
外边框（margin）

在这里插入图片描述
margin层的边框以外留的空白
background-color背景颜色
background-image背景图片
padding层的边框到层的内容之间的空白
border边框
content内容

在这里插入图片描述

margin和padding的属性
margin:
在这里插入图片描述

包括margin-top,margin-right,margin-bottom,margin-left
控制块级元素之间的距离他们是透明不可见的
根据上右下左的顺时针规则，可以写为
margin: 40px 40px 40px 40px;

当上下，左右margin值分别一致的时候，可简写为
margin: 40px 40px;

当上下左右margin值都一致的时候，可写为
margin: 40px;

padding
包括padding-top,padding-right,padding-bottom,padding-left
控制块级元素内部 content与border之间的距离

详细说明：
如果只提供一个，将用于全部的四条边
如果只提供两个，第一个用于上下，第二个用于左右
如果提供三个，第一个用于上，第二个用于左右，第三个用于下
如果提供四个，第一个用于上，第二个用于右，第三个用于下，第四个用于左
padding: 36px; //对象四边的补丁边距均为36px
padding: 36px 24px; //上下两边的补丁边距为36px，左右两边的补丁边距为24px
padding: 36px 24px 18px; //上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px
padding: 36px 24px 18px 12px; //上、右、下、左补丁边距分别为36px、24px、18px、12px

在这里插入图片描述