css中margin、padding带一至四个参数定义

已于 2023-09-28 19:41:43 修改
阅读量456 收藏 1
点赞数 1
分类专栏： Vue 文章标签： css
于 2022-04-08 11:30:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gong_wejoy/article/details/124037284
版权
本文详细介绍了CSS中margin属性的简写形式，包括如何设置上下左右的外边距，例如margin:20px 40px 60px 80px分别代表上、右、下、左的外边距。理解这一规则对于前端开发人员优化CSS代码至关重要。
摘要由CSDN通过智能技术生成

margin: 20px;（上、下、左、右各20px。）

margin: 20px 40px;（上、下20px；左、右40px。）

margin: 20px 40px 60px;（上20px；左、右40px；下60px。）

margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）

火 烈 鸟
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的Padding, Margin, Border 的区别
oscar999的专栏
12-16 1061
CSS 的Padding 、Margin 和Border 设置原理。 盒子模型
CSS Margin(外边距) CSS Padding（填充）
h13673476027的博客
11-14 940
​ 所有的CSS填充属性 属性 说明 padding 使用缩写属性设置在一个声明中的所有填充属性 padding-bottom 设置元素的底部填充 padding-left 设置元素的左部填充 padding-right 设置元素的右部填充 padding-top 设置元素的顶部填充​
CSS 中Margin参数詳解
chelen_jak的专栏
03-04 3650
转自：http://hi.baidu.com/linmingnet/item/bd43f70f3b647be2fe240d5e margin：  （1）一个参数值，将用于全部的四边。  （2）两个参数值，第一个用于上－下，第二个用于左－右。  （3）三个参数值，第一个用于上，第二个用于左－右，第三个用于下。  （4）四个参数值，将按上－右－下－左的顺序作用于四边。 再如：有
margin标记可以带一个、二个、三个、四个参数，各有不同的含义。
weixin_30384031的博客
07-22 104
margin标记可以带一个、二个、三个、四个参数，各有不同的含义。 margin: 20px;（上、下、左、右各20px。） margin: 20px 40px;（上、下20px；左、右40px。） margin: 20px 40px 60px;（上20px；左、右40px；下60px。） margin: 20px 40px 60px 80px;（上20...
CSS 盒模型（2）
lzh17538073353的博客
07-17 233
本篇讲述了margin值的问题及解决、和overflow的应用
前端——CSS
q_everyday的博客
08-18 182
CSS 1.HTML内部添加样式 <!--style表明样式--> <p style="font-size:14px;color:white"></p> <!--设置字体粗细,一种是用数字,200,400,700等等；一种是单词:lighter，normal，bold，bolder--> <p style="font-weight: 200;">优课达--学的比别人好一点～</p> <p style="font-weight: l
margin四个元素的顺序
热门推荐
xcmax
09-27 2万+
如果margin给的是四个值 比如：margin:0px 0px 0px 0px; 代表：margin: top right bottom left 代表从上右下左，顺时针方向。 如果margin给的是三个值 比如：margin:0px 0px 0px; 代表：margin: top  left-right bottom; 代表上
css下margin、padding、border、background和font缩写示例
10-30
最后，当每个边距都不同，可以使用四个值，如`margin:1px 2px 3px 4px`。 其次，`padding`与`margin`类似，但它是元素的内边距，即内容与边框之间的距离。同样有四种方式来进行缩写，遵循与`margin`相同的规则。 ...
css中padding、margin两个重要属性的详细介绍及举例说明
01-05
### CSS中的Padding与Margin属性详解 #### 一、引言 在前端开发中，CSS（层叠样式表）是用于定义HTML文档外观的核心技术之一。其中，`padding`与`margin`是两个至关重要的属性，它们直接影响着网页元素的空间布局...
CSS margin 属性定义边外补白
12-11
CSS中的`margin`属性是一个非常重要的布局工具，用于设置元素周围的空间，也就是边外补白。边外补白不显示任何颜色或样式，因为它本质上是透明的，但它的作用是控制元素之间的距离，使得网页布局更加灵活和美观。 ...
外边距、内边距以及浮动相关
weixin_43507887的博客
02-25 1098
一、margin是外间距，可以设置一个容器外面的缝隙 1、简写 margin：20px； 上下左右 margin:20px 30px; 上下 左右 margin:20px 30px 40px; 上 左右 下 margin:20px 30px 40px 50px; 上右下左 2、单独设置 margin-top:20px; 外上间距 margin-bottom:20px; 外下间距 margin-left:20px; 外左间距 margin-right:20px; 外右间距
margin 参数 与 位置（1个上下左右；2个：上下+左右；3个：上+左右+下；）
kungfu_panda的专栏
08-11 1万+
~
CSS中 padding 、margin两个重要属性的详细介绍及举例说明
09-09 1534
本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代
【CSS】css中margin标记可以带一个、二个、三个、四个参数，各有不同的含义
最新发布
学习 记录 总结 分享
08-08 4816
带不同的参数具有不同的含义，下面给出参数的具体含义，如下所示。margin后面如果只有两个参数的话，在css中使用margin可以将。，缩写为一个标记，顺序为。CSS 居中如何实现。
遇见未知的CSS
weixin_33770878的博客
05-10 139
摘录自《CSS核心技术详解》 1.1 CSS中你可能会疑问的几个问题 1.1.1 在CSS中为什么要有层叠 在CSS中可能会有多个样式表同时影响同一个元素的某个属性，设计这个功能的主要原因有两个，解决模块化和作者、用户、用户代理样式冲突。 模块化 一个页面中的样式可以拆分成多个样式表，代码如下。 @import url(style/base.css); @import url(style/la...
CSS笔记——常见布局技巧margin负值，文字围绕，行内块，强化三角
Yomuki的博客
11-28 173
一、margin负值使用 解决边框1+1=2的问题。 div { display: inline-block; float: left; width: 30px; height: 200px; border: 1px solid red; margin-left: -1px; } div:nth-child(1)
初学者对vue的学习使用 关于margin和padding的了解使用
qq_43393995的博客
05-13 8956
大佬连接跳转margin和padding的区别是什么-css教程-PHP中文网 margin和padding margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离；即外边距。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离；即内边距。 margin和padding的区别 margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。 （margin是用来隔开元素与元素的间距；padding是用来隔开元素
css加载动画
CKJCKJCHEN的博客
08-10 275
css加载动画
vue的基本使用
faramita_of_mine的博客
03-09 5851
vue的基本使用一、简介二、vue 的安装三、生命周期钩子四、模板语法五、常用指令六、数据侦听器七、Class、Style 绑定八、条件渲染九、列表渲染十、表单输入绑定十一、组件十二、插槽 一、简介   Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单
CSS盒模型详解：padding、border、outline与margin
本篇文档详细探讨了在 Cascading Style Sheets (CSS) 中至关重要的四个概念：内边距（Padding）、边框（Borders）、轮廓（Outlines）以及外边距（Margins）。由经验丰富的技术作者 Eric A. Meyer 编写，这本书旨在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值