Margin属性值详解

TSUKI_Yu

已于 2022-11-30 23:30:25 修改

阅读量906

点赞数 1

分类专栏：前端文章标签： css3 css html

于 2022-05-21 21:47:44 首次发布

本文链接：https://blog.csdn.net/TSUKI_Yu/article/details/124855317

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

知识点：

margin表示元素的外边距

1.语法

margin:auto | length | % inherit;

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

形如：margin:5px 10px 15px 20px;

依次表示上右下左

上 margin-top 5px

右 margin-right 10px

下 margin-bottom 15px

左 margin-left 20px

缺省情况下 margin:5px;

表示上下左右都是5px

缺省情况下 margin:5px 10px;

表示上下是5px,左右是10px

缺省情况下 margin:5px auto 10px;

表示上是5px,左右是auto,下为10px

默认值：	0
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.margin="10px 5px"

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TSUKI_Yu

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Margin属性值详解

margin 属性值详解
复制链接

扫一扫

专栏目录

margin属性

qq_45740377的博客

04-02

1983

margin和padding属性详解

Zzze0101的博客

05-21

3364

margin 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 margin样式属性用于在一个声明中设置所有外边距的宽度，或者设置各边上外边距的宽度。该属性有多个值：值描述 auto 浏览器计算外边距。 length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。注：允许使用负值，不过要谨慎使用。 % 规定基于父元素的宽度的百...

参与评论您还未登录，请先登录后发表或查看评论

margin的相关属性：

weixin_30565327的博客

05-25

227

margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 例子 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px 例子 4 mar...

前端 CSS 经典：flex + margin 布局

最新发布

weixin_64684095的博客

06-21

335

如今我们布局大多时候都是用的 flex 布局，但是有时我们也可以使用 margin 小技巧去完成布局。在弹性盒中当我们把 margin 某一个方向上设置为 auto，他的含义是用 margin 吃掉这个方向的剩余空间。

CSS基础：margin属性4种值类型，4个写法规则详解

u013179804的博客

04-15

3549

7.margin值

weixin_30394633的博客

05-17

211

CSS中的margin值 ①直接通过margin指定 1.margin：10px 20px;则从上边开始，外边距10px,然后顺时针右边距是20px;而下和左没有写，则默认和对边相同。 2.margin: 10px 20px 30px;上是10px,左是20px,下是30px,右如果不指定会与她的对边，及左边的margin相一致。 ②指定位置的margin值 ...

CSS中margin属性值的含义

艾斯博弈

11-21

1923

定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。说明这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。注释：允许使用负值

深入理解css中的margin属性（推荐）

09-24

【CSS中的margin属性详解】 CSS中的margin属性是用于设置元素周围空间的重要属性，它能够帮助开发者控制元素与元素之间的间距，提升页面布局的美观性和可读性。在深入理解margin属性之前，我们需要先了解CSS的盒子...

margin padding图文详解

Long_gone的博客

07-03

1522

一、外边距——margin 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。单边外边距属性上外边距：margin-top 右外边距：margin-right 下外边距：margin-bottom 左外边距：margin-left 外边距塌陷（改变） overflow:hidden; 二、内边距——padding 元素的内边距在边框和内容区之间。 CSS padding 属性定义元

CSS3 calc()会计算属性详解

01-21

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。怎么使用 calc()可以使用数学运算中的简单加（+）、...

CSS中clip-path属性的使用详解

12-14

【CSS中的clip-path属性详解】 `clip-path`属性在CSS中是一个非常强大的工具，用于剪裁元素的内容区域，展示特定形状的部分。它允许开发者通过指定的几何形状来裁剪元素，创造出富有创意的布局和设计效果。在本篇...

不要告诉我你懂margin

dgk62408的博客

06-27

1157

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于...

margin三个值

weixin_30920853的博客

09-24

403

http://www.cnblogs.com/wangkongming/p/3204734.html margin标记可以带一个、二个、三个、四个参数，各有不同的含义。 margin: 20px;（上、下、左、右各20px。） margin: 20px 40px;（上、下20px；左、右40px。） margin: 20px 40px 60px;（上20p...

CSS——margin的参数

chengzhangdewo的博客

10-12

1402

margin： 4 （1）一个参数值，将用于全部的四边。 5 （2）两个参数值，第一个用于上－下，第二个用于左－右。 6 （3）三个参数值，第一个用于上，第二个用于左－右，第三个用于下。 7 （4）四个参数值，将按上－右－下－左的顺序作用于四边。 8 再如：有人问CSS 居中如何实现。那可以这么写： 9 10 margin:0 auto ; 11 margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 12 因为0 auto，表示上下..

margin：外边距

zhuhaoyu6666的博客

11-21

1447

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”区域。接受任何长度单位、百分数值甚至负值，默认值为0 往往也是内盒子边框与外盒子的边框的距离其写法也是有1、2、3、4值，其用法和padding一样接受任何长度单位，可以是像素、英寸、毫米或 em。百分数是相对于父元素的 width 计算的浏览器会为某些元素设置默认的外边距，eg：p元素的上下空一行 margin-top、margin-right、margin-bottom、margin-left分别设置4个方向

【CSS】css中margin标记可以带一个、二个、三个、四个参数，各有不同的含义

学习记录总结分享

08-08

4846

带不同的参数具有不同的含义，下面给出参数的具体含义，如下所示。margin后面如果只有两个参数的话，在css中使用margin可以将。，缩写为一个标记，顺序为。CSS 居中如何实现。

margin或padding值为1个、2个、3个、4个的时候分别代表什么意思

m0_62404884的博客

05-27

8008

margin的值为4个时：margin：上右下左；（顺时针方向） margin的值为3个时：margin：上右= 左下； margin的值为2个时：margin：上=下左=右； margin的值为1个时：上=右=下=左； padding同理例如： margin：20px,30px,40px,60px ; (上20px，右3px，下 40px，左60px) margin：20px,30px,40px ; (上20px，左、右30px，下40...