- 外文名
- margin
- 编程语言
- CSS
- 中文名
- 外边距 [1]
-
2022-04-08 16:25:32
一、写在前面
根据w3c规范,两个margin产生折叠的必备条件:
1、必须处于常规文档流(不能是浮动和定位)的块级盒子,并且处于同一个BFC当中。 2、没有线盒,没有空隙,没有padding和border将他们分割。 3、都处于垂直方向相邻的外边距。
二、例子
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } .aa { border-bottom: 1px solid red; } .bb { border-top: 1px solid red; } </style> </head> <body> <div> <p class="aa">AAA</p> <p></p> <p></p> <p></p> <p class="bb">BBB</p> </div> </body> </html>
经过验证,两者的距离为15px,原因如下:
1、空的p标签会重叠 2、margin-top和margin-bottom会重叠,所以距离为15px。
margin为负值时的注意事项:
1、margin-left为负值时,自身元素会向左移动。 2、margin-top为负值时,自身元素会向上移动。 3、margin-right为负值时,自身元素不受影响,但是相邻元素会向左移动。 4、margin-bottom为负值时,自身元素不受影响,但是相邻元素会向上移动。 5、position:absolute时,margin-right和margin-bottom为负值时,自身元素会受影响。
三、遇到面试题我们可以这样回答
margin重叠是指在垂直方向上,相邻的两个元素的margin会发生重叠的情况。一般来说分为以下4种情况:
3.1、
相邻兄弟元素的margin-bottom和margin-top发生重叠,这时候我们可以设置其中一个元素为BFC即可解决
3.2、
父元素的margin-top和子元素的margin-top发生重叠,他们发生重叠是因为这两个元素是相邻的,所以可以通过以下几种方法来解决:1、 为父元素设置padding-top或border-top来分割他们。 2、 设置父元素为BFC。 3、父元素和第一个子元素之间添加一个内联元素来进行分割。
3.3、
高度为auto的父元素的margin-bottom和最后一个子元素的margin-bottom发生重叠,他们发生重叠一个原因是他们是相邻的,另一个原因是父元素的高度是不固定的,那么可以通过以下几种方法来解决:1、为父元素设置padding-bottom或border-bottom将他们分开。 2、 把父元素设置为BFC。 3、 父元素和最后一个子元素之间添加一个内联元素进行分割。 4、 为父元素设置一个高度,height、max-height或者min-height都可以解决
3.4、
没有内容的元素,自身的margin-top和margin-bottom发生重叠,可以通过以下几种方法解决:1、元素设置padding或border。 2、给元素设置一个高度。
更多相关内容 -
你真的了解margin吗?你知道margin有什么特性吗?
2020-09-25 03:33:25你是否彻底了解margin属性?什么时候该用padding而不是margin?你知道负margin吗?针对这些问题,本文将彻底的为大家解析下 -
简单谈谈margin负值的作用
2020-10-20 12:53:22我们在CSS中都会使用margin,但将margin设置成负数,那可能就不大好处理了,margin负值并非hack,margin负值遵循文档流;假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移;margin负值能良好... -
margin
2021-06-13 00:53:03margin(CSS语法)编辑锁定讨论上传视频margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。中文名外边距[1]外文名margin编程语言CSSmargin定义...margin
(CSS语法)
编辑
锁定
讨论
上传视频
margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。
中文名
外边距[1]外文名
margin
编程语言
CSS
margin定义
编辑
margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。
margin 属性接受任何长度单位、百分数值甚至负值。
margin 属性可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。[2]
margin简洁写法
编辑
margin跟padding一样,也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。
margin写法有4种,分别如下:margin: 像素值1;
margin: 像素值1 像素值2;
margin: 像素值1 像素值2 像素值3;
margin: 像素值1 像素值2 像素值3 像素值4;
以上四个位置按顺序分别为:margin-top--margin-right--margin-bottom--margin-left,即“上-右-下-左”。以下简写为top--right--bottom--left。其中需要注意的是后三种情况,当有像素值缺省时,浏览器会自动对缺省像素按照“bottom=top”和“left=right”的方法进行赋值。
例如:
“margin:20px;”表示四个方向的外边距都是20px;
“margin:20px 40px;”表示top为20px,right为40px;由于bottom和left缺省,所以自动将它们分别设为20px和40px。转化为第4种写法为:“margin:20px 40px 20px 40px;”。
“margin:20px 40px 60px;”表示top为20px,right为40px,bottom为60px;由于left缺省,所以自动将它设为40px。转化为第4种写法为:“margin:20px 40px 60px 40px;”。
需要注意的是一种情况不能写为缺省写法:“margin:20px 40px 20px 60px;”。该例中,由于top和bottom相同,但right和left不同,所以不能将bottom缺省,否则会等同于“margin:20px 40px 60px 40px;”。
margin语法说明
编辑
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
margin边距属性
编辑
属性描述
margin简写属性。在一个声明中设置所有外边距属性。[1]
margin-top设置元素的上外边距。
margin语法结构
编辑
margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距,左右边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距
注释:允许使用负值。
margin语法举例
编辑
例子 1margin:10px 5px 15px 20px;上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2margin:10px 5px 15px;上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3margin:10px 5px;上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4margin:10px;所有 4 个外边距都是 10px默认值:0
继承性:no
JavaScript 语法:object.style.margin="10px 5px"
margin实例
编辑
设置 p 元素的 4 个外边距:
p { margin:2cm 4cm 3cm 4cm; }
margin浏览器支持
编辑
所有浏览器都支持 margin 属性。
注释:任何的版本的 Internet Explorer(包括 IE8)都不支持属性值 "inherit"。
margin可能的值
编辑
值描述
auto浏览器计算外边距。
length规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
%规定基于父元素的宽度的百分比的外边距。
inherit规定应该从父元素继承外边距。
[3-4]
margin内外距离区别
编辑
这是很多学html 人的困扰
其实说白了padding就是内容与边框的空隙.而margin 则是模块与模块的空隙.下面图解:
margin 与 padding 得盒子模型图解
margin实例
编辑
本例演示如何将所有的边距属性设置于一个声明中。
p.margin{margin:50px100px75px100px}
这个段落没有指定外边距。
这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。
这个段落没有指定外边距。
词条图册
更多图册
参考资料
1.
CSS Margin(外边距)
.w3cschool菜鸟教程.2014-02-21[引用日期2014-02-23]
2.
CSS margin
.W3Cschool[引用日期2018-04-12]
3.
CSS margin 属性
.w3cshcoll[引用日期2012-11-21]
4.
CSS margin 属性
.w3school 在线教程[引用日期2013-06-15]
-
margin 负值引起的层级(z-index)问题
2020-09-27 22:14:42主要为大家介绍margin 负值引起的层级(z-index)问题的解决方法,需要的朋友可以参考下 -
CSS margin 属性定义边外补白
2020-12-11 17:26:36边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白. 可以查看盒模式,了解边外补白和边内补白. 边外补白分为上边外补白(top),下边外补白(bottom),左边外... -
深入解析CSS中margin属性的使用
2020-12-13 08:30:05一、Margin的特性margin始终是透明的。margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。外边距的 margin-width 的值类型有:auto | ... -
CSS重要属性之 margin 属性知识大整合(必看篇)
2020-12-13 11:41:38以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄。所以写成以下文章,一是供自己整理思路;二是把知识分享出来,避免各位对margin属性的误解。内容可能会有点多,但都是... -
span margin 设置生效
2020-12-10 19:53:10比如: span{ margin-left:25px; margin-top:200px; } 改为 span{ margin-left:25px; margin-top:200px; display:block; } -
细说CSS中margin属性的使用
2020-09-24 23:27:37和大家详细说一说CSS中margin属性的使用,重点描述了关于margin,我们日常不太容易发现的“坑,感兴趣的小伙伴们可以参考一下 -
JavaScript设置Div的margin参数
2014-09-13 18:07:17JavaScript设置Div的margin参数 -
css margin属性深入解析
2020-12-13 17:43:43margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area。属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距。 margin属性... -
CSS margin(外边距)
2021-01-19 21:29:26CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。 margin 可以单独改变元素的上,下,左,右边距,也可以一次... -
CSS-浮动元素的margin-left和margin-right
2021-07-12 21:32:58marigin-left和margin-right理解 margin-left:“盒子”元素的左外边距,当属性值增大,元素表现为向右移动,该属性值减少,元素表现为向左移动。 margin-right:"盒子"元素的右外边距,当属性值增大,元素表现为...marigin-left和margin-right理解
margin-left:“盒子”元素的左外边距,当属性值增大,元素表现为向右移动,该属性值减少,元素表现为向左移动。
margin-right:"盒子"元素的右外边距,当属性值增大,元素表现为向左移动,该属性值减少,元素表现为向右移动。
float:left和float:right理解
float:left 元素变为浮动元素,并向左浮动
float:right 元素变为浮动元素,并向右浮动
单纯的float:left
当前有如下情况:
container.width=500px
box1,box2.width=300px
且box1,box2是float:left的,最终呈现如下图,box2因为上面一行闲置宽度只有500-300=200px
所以box2上浮不上去了,只能被挤到第二行。
(float:left + margin-left/right:负数px)产生的神奇现象及其原因
那么有没有办法将box2上浮上去呢?(不使用定位)
当前contaner第一行闲置宽度只有200px,那么是不是box2的宽度减少到200px就可以浮动上去了呢?
我们直到HTML中所有元素都是盒子,具有盒子模型,一个盒子的宽度可以看成:
内容宽度+(左右)padding宽度+ (左右)border宽度 + (左右)margin宽度
其中内容宽度,paddin宽度,border宽度都不能是负数,只有margin宽度可以是负数。
所以可以在左右margin上做负数移动。
例如box2如果想要上浮到第一行,则宽度需要减少到200px,当前宽度是300px,所以只需要-100px就可以。
若box2 float:left + margin-left:-100px
可以发现box2在margin-left:-100px之后,整体上浮到了第一行,且是box2右边框线贴着container右边框线,为什么不是box2的左边框线贴着box1的右边框线呢?
我们需要理解,box2在margin-left:-100px之后,box2的有效宽度只剩下200px了,溢出去的100px可以看成是无效宽度(注意是无效,而不是失效宽度),所以能够填充进第一行闲置200px宽度区域的只能是box2的有效区域了。
观察下margin-left:-99px,
其中分为99px的无效宽度区,和201px的有效宽度区。(没有考虑border,方便理解)
再观察下margin-left:-100px,可以看到填充进container第一行闲置区域的就是box2的有效区域,而box2的无效区域已经覆盖了box1部分区域。
如果margin-left:x<-100px,比如-200px,那么box2会继续覆盖box1吗?
会,因为margin-left:-200px可以看成是box2有效宽度继续减少
如果margin-left:-400px,会发生什么?
当margin-left:-100px时,box2会上浮一行,此时box2还剩余200px有效宽度
当margin-left=-400px时,此时box2肯定会上浮一行,且box2有效宽度为-100px,即box2左边溢出100px
若box2 float:left + margin-right:-100px
计算下box2有效宽度= 300px - 100px =200px
也刚好可以填充进container第一行闲置宽度区域,所以会上浮
可以发现此时box2上浮后的位置有所不同
这里不同的原因是box2有效区域区域变了,
之前margin-left:-100px,导致box2的左边100px区域无效了。
现在margin-right:-100px,会导致box2的右边100px区域无效。
那么当box2继续margin右移,如margin-right:-200px
box2会逐渐移出container吗?
不会,因为box2还有float:left控制,即box2会不停的向左浮动,将container第一行闲置宽度区域占据,即不停给box2的有效宽度自动加值,但是最大只能加到第一行闲置有限宽度大小。
而 box2 float:left + margin-left:-200px
因为box2是左浮动,所以不影响margin-left负数值,即不影响左移
-
深入理解css中的margin属性(推荐)
2021-01-21 14:07:18之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分: margin–... -
CSS深入学习之让你认识不一样的margin
2020-12-13 04:46:05实际上,我们通常设置的margin是物理级别的设置,而margin还有start、end、before、after等,这些主要是逻辑级别的设置,如果你感兴趣的话,自行Google吧。 在设置margin时,我们必须要知道: 对于块级元素,margin... -
一文详解SVM的Soft-Margin机制
2019-09-24 18:22:25AI有道一个有良心的公众号Hard-Margin SVM,必须将所有的样本都分类正确才行。这往往需要更多更复杂的特征转换,甚至造成过拟合。本文将介绍一种Soft-Marg...AI有道一个有良心的公众号
Hard-Margin SVM,必须将所有的样本都分类正确才行。这往往需要更多更复杂的特征转换,甚至造成过拟合。本文将介绍一种Soft-Margin SVM,目的是让分类错误的点越少越好,而不是必须将所有点分类正确,也就是允许有noise存在。这种做法很大程度上不会使模型过于复杂,不会造成过拟合,而且分类效果是令人满意的。
——前言
1
Motivation and Primal Problem
SVM同样可能会造成overfit。原因有两个,一个是由于我们的SVM模型(即kernel)过于复杂,转换的维度太多,过于powerful了;另外一个是由于我们坚持要将所有的样本都分类正确,即不允许错误存在,造成模型过于复杂。如下图所示,左边的图Φ1是线性的,虽然有几个点分类错误,但是大部分都能完全分开。右边的图Φ4是四次多项式,所有点都分类正确了,但是模型比较复杂,可能造成过拟合。直观上来说,左边的图是更合理的模型。
如何避免过拟合?方法是允许有分类错误的点,即把某些点当作是noise,放弃这些noise点,但是尽量让这些noise个数越少越好。回顾一下我们在机器学习基石笔记中介绍的pocket算法,pocket的思想不是将所有点完全分开,而是找到一条分类线能让分类错误的点最少。而Hard-Margin SVM的目标是将所有点都完全分开,不允许有错误点存在。为了防止过拟合,我们可以借鉴pocket的思想,即允许有犯错误的点,目标是让这些点越少越好。
为了引入允许犯错误的点,我们将Hard-Margin SVM的目标和条件做一些结合和修正,转换为如下形式:
我们再对上述的条件做修正,将两个条件合并,得到:
这个式子存在两个不足的地方。首先,最小化目标中第二项是非线性的,不满足QP的条件,所以无法使用dual或者kernel SVM来计算。然后,对于犯错误的点,有的离边界很近,即error小,而有的离边界很远,error很大,上式的条件和目标没有区分small error和large error。这种分类效果是不完美的。
为了改正这些不足,我们继续做如下修正:
修正后的表达式中,我们引入了新的参数ξn来表示每个点犯错误的程度值,ξn≥0。通过使用error值的大小代替是否有error,让问题变得易于求解,满足QP形式要求。这种方法类似于我们在机器学习基石笔记中介绍的0/1 error和squared error。这种soft-margin SVM引入新的参数ξ。
至此,最终的Soft-Margin SVM的目标为:
条件是:
其中,ξn表示每个点犯错误的程度,ξn=0,表示没有错误,ξn越大,表示错误越大,即点距离边界(负的)越大。参数C表示尽可能选择宽边界和尽可能不要犯错两者之间的权衡,因为边界宽了,往往犯错误的点会增加。large C表示希望得到更少的分类错误,即不惜选择窄边界也要尽可能把更多点正确分类;small C表示希望得到更宽的边界,即不惜增加错误点个数也要选择更宽的分类边界。
与之对应的QP问题中,由于新的参数ξn的引入,总共参数个数为d^+1+N,限制条件添加了ξn≥0,则总条件个数为2N。
2
Dual Problem
接下来,我们将推导Soft-Margin SVM的对偶dual形式,从而让QP计算更加简单,并便于引入kernel算法。首先,我们把Soft-Margin SVM的原始形式写出来:
然后,跟我们在第二节课中介绍的Hard-Margin SVM做法一样,构造一个拉格朗日函数。因为引入了ξn,原始问题有两类条件,所以包含了两个拉格朗日因子αn和βn。拉格朗日函数可表示为如下形式:
接下来,我们利用Lagrange dual problem,将Soft-Margin SVM问题转换为如下形式:
根据之前介绍的KKT条件,我们对上式进行简化。上式括号里面的是对拉格朗日函数L(b,w,ξ,α,β)计算最小值。那么根据梯度下降算法思想:最小值位置满足梯度为零。
我们先对ξn做偏微分:
根据上式,得到βn=C−αn,因为有βn≥0,所以限制0≤αn≤C。将βn=C−αn代入到dual形式中并化简,我们发现βn和ξn都被消去了:
这个形式跟Hard-Margin SVM中的dual形式是基本一致的,只是条件不同。那么,我们分别令拉个朗日函数L对b和w的偏导数为零,分别得到:
经过化简和推导,最终标准的Soft-Margin SVM的Dual形式如下图所示:
oft-Margin SVM Dual与Hard-Margin SVM Dual基本一致,只有一些条件不同。Hard-Margin SVM Dual中αn≥0,而Soft-Margin SVM Dual中0≤αn≤C,且新的拉格朗日因子βn=C−αn。在QP问题中,Soft-Margin SVM Dual的参数αn同样是N个,但是,条件由Hard-Margin SVM Dual中的N+1个变成2N+1个,这是因为多了N个αn的上界条件。
3
Messages behind Soft-Margin SVM
推导完Soft-Margin SVM Dual的简化形式后,就可以利用QP,找到Q,p,A,c对应的值,用软件工具包得到αnαn的值。或者利用核函数的方式,同样可以简化计算,优化分类效果。Soft-Margin SVM Dual计算αn的方法过程与Hard-Margin SVM Dual的过程是相同的。
那么,在Soft-Margin SVM Dual中,相应的complementary slackness条件有两个(因为两个拉格朗日因子αn和βn):
上面求解b提到的一个假设是αs<C,这个假设是否一定满足呢?如果没有free SV,所有αs大于零的点都满足αs=C怎么办?一般情况下,至少存在一组SV使αs<C的概率是很大的。如果出现没有free SV的情况,那么b通常会由许多不等式条件限制取值范围,值是不确定的,只要能找到其中满足KKT条件的任意一个b值就可以了。这部分细节比较复杂,不再赘述。
接下来,我们看看C取不同的值对margin的影响。例如,对于Soft-Margin Gaussian SVM,C分别取1,10,100时,相应的margin如下图所示:
从上图可以看出,C=1时,margin比较粗,但是分类错误的点也比较多,当C越来越大的时候,margin越来越细,分类错误的点也在减少。正如前面介绍的,C值反映了margin和分类正确的一个权衡。C越小,越倾向于得到粗的margin,宁可增加分类错误的点;C越大,越倾向于得到高的分类正确率,宁可margin很细。我们发现,当C值很大的时候,虽然分类正确率提高,但很可能把noise也进行了处理,从而可能造成过拟合。也就是说Soft-Margin Gaussian SVM同样可能会出现过拟合现象,所以参数(γ,C)的选择非常重要。
我们再来看看αnαn取不同值是对应的物理意义。已知0≤αn≤C满足两个complementary slackness条件:
所以,在Soft-Margin SVM Dual中,根据αnαn的取值,就可以推断数据点在空间的分布情况。
4
Model Selection
在Soft-Margin SVM Dual中,kernel的选择、C等参数的选择都非常重要,直接影响分类效果。例如,对于Gaussian SVM,不同的参数(C,γ),会得到不同的margin,如下图所示。
其中横坐标是C逐渐增大的情况,纵坐标是γ逐渐增大的情况。不同的(C,γ)组合,margin的差别很大。那么如何选择最好的(C,γ)等参数呢?最简单最好用的工具就是validation。
validation我们在机器学习基石课程中已经介绍过,只需要将由不同(C,γ)等参数得到的模型在验证集上进行cross validation,选取Ecv最小的对应的模型就可以了。例如上图中各种(C,γ)组合得到的Ecv如下图所示:
因为左下角的Ecv(C,γ)最小,所以就选择该(C,γ)对应的模型。通常来说,Ecv(C,γ)并不是(C,γ)的连续函数,很难使用最优化选择(例如梯度下降)。一般做法是选取不同的离散的(C,γ)值进行组合,得到最小的Ecv(C,γ),其对应的模型即为最佳模型。这种算法就是我们之前在机器学习基石中介绍过的V-Fold cross validation,在SVM中使用非常广泛。
V-Fold cross validation的一种极限就是Leave-One-Out CV,也就是验证集只有一个样本。对于SVM问题,它的验证集Error满足:
也就是说留一法验证集Error大小不超过支持向量SV占所有样本的比例。下面做简单的证明。令样本总数为N,对这N个点进行SVM分类后得到margin,假设第N个点的αN=0,不是SV,即远离margin(正距离)。这时候,如果我们只使用剩下的N-1个点来进行SVM分类,那么第N个点必然是分类正确的点,所得的SVM margin跟使用N个点的到的是完全一致的。这是因为我们假设第N个点是non-SV,对SV没有贡献,不影响margin的位置和形状。所以前N-1个点和N个点得到的margin是一样的。
那么,对于non-SV的点,它的g−=g,即对第N个点,它的Error必然为零:
另一方面,假设第N个点αN≠0,即对于SV的点,它的Error可能是0,也可能是1,必然有:
SV的数量在SVM模型选择中也是很重要的。一般来说,SV越多,表示模型可能越复杂,越有可能会造成过拟合。所以,通常选择SV数量较少的模型,然后在剩下的模型中使用cross-validation,比较选择最佳模型。
您不一定要赞赏,但请点个赞吧
长按二维码
扫描关注
点击 | 阅读原文 | 查看更多干货内容 -
css中margin:auto属性的使用方法
2021-08-04 07:37:57css中margin:auto属性的使用方法发布时间:2020-06-25 10:53:17来源:亿速云阅读:221作者:Leah今天就跟大家聊聊有关css中margin:auto属性的使用方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了... -
css中margin是什么意思,margin作用是什么?
2021-06-25 10:41:56margin为对象外边距间隔属性。如果对一个对象比如div设置了边框后,再设置margin就会观察到这个div外面产生了间距边距。margin作用:设置对象与其它对象的外边距离,外边间隔。比如对象与对象,上下DIV,左右DIV间隔... -
[HTML-Margin]margin设置为auto实现水平垂直居中
2022-03-09 15:50:411.margin设置为auto的作用 auto表示自动填充剩余空间。多用于实现元素居中。 代码和展示效果如下: <div class="parent"> <div class="child">div> div> .parent { background-color: #222; height: 200px; width: ... -
margin-left和right失效(斯芬克斯)之谜
2012-01-24 18:01:57一般很多人遇到的margin失效都是纵向上面的: 一种情况是元素的确不支持margin-top/bottom(参看:关于margin-top/bottom在inline元素(non-Replaced)上不起作用的解释); 另一种情况则是元素产生了margin叠加(参看:... -
CSS margin属性介绍与用法(附margin解剖图)
2020-09-25 07:48:09margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,包含了margin left/top/right/bottom/元素块距离,详细使用方法如下,感兴趣的朋友可以了解下哈 -
5分钟深入了解margin属性
2020-03-21 12:07:06margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 **说明:**这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并,而行内元素... -
html css中margin的用法
2021-07-08 14:20:43css中margin的用法1、使用auto实现在浏览器水平自动居中 1、使用auto实现在浏览器水平自动居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin... -
css margin:auto的使用
2021-12-09 14:36:44块级元素使用margin:auto水平居中: div { width: 200px; height: 200px; margin: 0 auto; } 块级元素margin:auto不能垂直居中的原因: 在 display: block 中,如果 margin-left 和 margin-right 都是 auto,则... -
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)
2019-05-20 00:50:08文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距,该属性有多个值: 值 描述 ... -
css中margin:auto什么意思?margin:auto属性的用法详解
2021-06-14 07:31:48我们都知道使用margin:auto可以让元素水平居中的。但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理。auto如果它适用于垂直居中,那么又是一种... -
margin水平居中 关于margin的居中问题
2021-06-12 09:07:43margin 水平居中 CSS#sm { margin-left: auto; margin-right: auto;} #sm ul,#sm li { float首先新建一个HTML文件,命名为test.html。为了测试出明显的效果,在test.html使用div定义了一个带边框的模块,里面放一个p... -
Android 动态设置margin
2021-05-26 18:40:51android的view中有setPadding,但是没有直接的setMargin方法。如果要在代码中设置该怎么做呢? 可以通过设置view里面的LayoutParams 设置,而这个LayoutParams是根据该view在不同的...tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > android:id="@+id/ceshi_ly" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/darker_gray" > android:id="@+id/ceshi_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/holo_green_dark" android:text="测试动态设置margin...