margin 订阅
margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。 展开全文
margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。
信息
外文名
margin
编程语言
CSS
中文名
外边距 [1]
margin定义
margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。margin 属性接受任何长度单位、百分数值甚至负值。margin 属性可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。 [2] 
收起全文
精华内容
下载资源
问答
  • margin

    2019-03-12 20:21:56
    margin 影响可视尺寸 条件 1、适用于没有设定width/height的普通block水平元素 float元素absolute/fixed元素 inline元素 table-cell元素排除 2、只适用于水平方向 案例 一侧定宽的自适应布局 百分比margin的计算规则...

    在这里插入图片描述
    1实线 可视尺寸 clientWidth(标准)
    2虚线 占据尺寸 outerWidth(jquery)

    margin 影响可视尺寸
    条件
    1、适用于没有设定width/height的普通block水平元素
    float元素absolute/fixed元素 inline元素 table-cell元素排除
    2、只适用于水平方向
    案例
    一侧定宽的自适应布局

    百分比margin的计算规则
    普通元素的百分比margin都是相对于容器的宽度计算

    绝对定位元素的百分比margin相对于第一个定位祖先元素的宽度计算的。
    案例
    自适应矩形

    margin 重叠通常特性
    父子 margin重叠的条件
    一、margin-top
    1父元素非块状格式化上下文元素
    2父元素没有border-top
    3父元素没有padding-top
    4父元素与第一个子元素之间没有inline元素分隔
    二、margin-bottom
    1父元素非块状格式化上下文元素
    2父元素没有border-bottom
    3父元素没有padding-bottom
    4父元素与最后一个子元素之间没有inline元素分隔
    5父元素没有height ,min-height,max-height限制

    空block元素发生margin重叠的条件
    1元素没有border设置
    2元没有padding设置
    3里面没有inline元素设置
    4没有height ,min-height

    margin-auto
    如果一侧定值一侧为auto ,auto为剩余空间的大小,如果两侧均为auto 则平分剩余空间

    为什么给图片设置margin:0 auto 不水平居中
    因为图片是inline-block元素 ,不会填充 剩余空间

    解决 加display:block

    writling-mode垂直居中
    writling-mode:vertical-lr 更改流为垂直方向。
    在这里插入图片描述
    在这里插入图片描述
    margin无效情况
    1内联元素垂直方向margin无效
    2margin重叠
    3display: table-cell/display:table-row无效
    在这里插入图片描述
    在谷歌浏览器下botton永远是是inline-block元素

    展开全文
  • margin负值问题

    千次阅读 2017-08-17 21:41:42
    margin

    margin四值顺序

    • 【1个值】margin: top|right|bottom|left;
    • 【2个值】margin: top|bottom left|right;
    • 【3个值】margin: top left|right bottom;
    • 【4个值】margin: top right bottom left;

    margin表现

    • block元素可以使用四个方向的margin值

    • inline元素使用上下方向的margin值无效

    • inline-block使用上下方向的margin负值看上去无效

    重叠

    • 【1】两个block元素重叠时,后面元素可以覆盖前面元素的背景,但无法覆盖其内容
    • 【2】当两个inline元素,或两个line-block元素,或inline与inline-block元素重叠时,后面元素可以覆盖前面元素的背景和内容
    • 【3】当inline元素(或inline-block元素)与block元素重叠时,inline元素(或inline-block元素)覆盖block元素的背景,而内容的话, 后面的元素覆盖前面的元素
      总结:在普通流布局中,浏览器将页面布局分为内容和背景,内容的层叠显示始终高于背景。block元素分为内容和背景,而inline元素或inline-block元素,它本身就是内容(包括其背景等样式设置)

    负值

    1、原理:

    • 设置左右margin负值会增加元素的宽度 (该元素没有设定width属性或width:auto)
    • margin-top设置负值不会增加元素高度,只会产生向上的位移
    • -margin-bottom设置负值不会产生位移,只会减小元素供CSS读取的高度

    2、对普通文档流中元素(指不是浮动元素也不是绝对定位、固定定位的元素等)的影响

    负边距对由普通文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,这种偏移不同于相对定位(通过相对定位偏移后的元素仍然会坚守着它原来占据的空间,不会让文档流的其它元素乘虚而入),通过负边距进行偏移的元素,它会放弃偏移前占据的空间,这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
    文档流只能是后面的流向前面的,即文档流只能向左或向上流动,不能向下或向右移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>对普通文档流元素的影响</title>
      <style type="text/css">
       .box{
         display: block;
         width: 400px;
         height: 200px;
         background-color: red;
       }
        span{
          background-color: aqua;
        }
        p{
          display: inline-block;
          background-color: indianred;
          width: 100px;
          height: 100px;
        }
      </style>
    </head>
    <body>
     <div class="box">块状元素,位置由文档流控制</div>
     <div>
       行内元素,位置由文档流控制行内元素,位置由文档流控制行内元素,位置由文档流控制<span>行内元素,位置由文档流控制</span>
       行内元素,位置由文档流控制行内元素,位置由文档流控制行内元素,位置由文档流控制行内元素,位置由文档流控制
     </div>
     <p>inline-block元素,位置由文档流控制</p>
    </body>
    </html>

    页面效果
    这里写图片描述
    给所有元素设置负边距

    *{
          margin: -10px;
        }

    页面效果
    这里写图片描述

    3、对浮动元素的影响

    可以改变元素的布局显示位置,某个元素即使是写在了后面,但可以通过负边距让它在浏览器显示的时候显示在前面 (圣杯布局、双飞翼布局利用此原理实现。)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>对浮动元素的影响</title>
      <style type="text/css">
       div{
         float: left;
         width: 100px;
         height: 100px;
         line-height: 100px;
       }
        .one{
          background-color: salmon;
        }
        .two{
          background-color: aqua;
        }
        .three{
          background-color: yellow;
          margin-left:-200px;
        }
      </style>
    </head>
    <body>
      <div class="one">元素一</div>
      <div class="two">元素二</div>
      <div class="three">元素三</div>
    
    </body>
    </html>

    页面效果
    这里写图片描述

    4、对绝对定位元素的影响(做居中)

    绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离,这个元素自身的边界指的就是margin定义的边界,所以,如果margin为正的时候,那它的边界是向外扩的,如果margin为负的时候,则它的边界是向里收的。
    必须知道定位元素的宽高才能设置margin值做居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>对绝对定位元素的影响</title>
      <style type="text/css">
        .a{
          width: 200px;
          height: 200px;
          background-color: red;
          position: absolute;
          left:50%;
          top:50%;
          margin-left: -100px;//宽度一半
          margin-top: -100px;//高度一半
        }
    
      </style>
    </head>
    <body>
    <div class="a"></div>
    </body>
    </html>

    页面效果
    这里写图片描述

    展开全文
  • 文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距,该属性有多个值: 值 描述 ...

    一、margin-top样式属性

    设置元素的上外边距,该属性有多个值:

    描述
    auto 浏览器设置的上外边距。
    length 定义固定的上外边距。默认值是 0。允许使用负值。
    % 定义基于父对象总高度的百分比上外边距。
    inherit 规定应该从父元素继承上外边距。注:IE浏览器都不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-top</title>
    		<style type="text/css">
    			div{border-style: dotted;}
    			.two{margin-top:36px;}
    		</style>
    	</head>
    	<body>
    		<div class="one">第一个div</div>
    		<div class="two">第二个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    二、margin-right样式属性

    设置元素的右外边距, 该属性有多个值:

    描述
    auto 浏览器设置的右外边距。
    length 定义固定的右外边距。默认值是 0。允许使用负值。
    % 定义基于父对象总高度的百分比右外边距。
    inherit 规定应该从父元素继承右外边距。注:IE浏览器都不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-right</title>
    		<style type="text/css">
    			.one{border-style: dotted;margin-right:36px;}
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    三、margin-bottom样式属性

    设置元素的下外边距,该属性有多个值:

    描述
    auto 浏览器计算下外边距。
    length 规定以具体单位计的下外边距值,比如像素、厘米等。默认值是 0px。允许使用负值。
    % 规定基于父元素的宽度的百分比的下外边距。
    inherit 规定应该从父元素继承下外边距。注:IE浏览器都不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-bottom</title>
    		<style type="text/css">
    			div{border-style: dotted;}
    			.one{margin-bottom:36px;}
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    		<div class="two">第二个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    四、margin-left样式属性

    设置元素的左外边距, 该属性有多个值:

    描述
    auto 浏览器设置的左外边距。
    length 定义固定的左外边距。默认值是0。允许使用负值。
    % 定义基于父对象总高度的百分比左外边距。
    inherit 规定应该从父元素继承左外边距。注:IE浏览器不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-left</title>
    		<style type="text/css">
    			.one{border-style: dotted;margin-left:36px;}
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    五、margin样式属性

    用于在一个声明中设置所有外边距的宽度,或者设置各边上外边距的宽度。该属性有多个值:

    描述
    auto 浏览器计算外边距。
    length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。注:允许使用负值,不过要谨慎使用;
    % 规定基于父元素的宽度的百分比的外边距。
    inherit 规定应该从父元素继承外边距。注:IE浏览器不支持"inherit"属性值 。

    示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-top</title>
    		<style type="text/css">
    			div{border-style: dotted;}
    			.two{margin:10px 30px 60px 150px;}//依次是top、right、bottom、left
    		</style>
    	</head>
    
    	<body>
    		<div class="one">第一个div</div>
    		<div class="two">第二个div</div>
    		<div class="three">第三个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述
    注意:
    1、margin属性可以有1到4个值,如下图所示:
    在这里插入图片描述
    2、margin:0 auto;//水平居中显示。示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中显示</title>
    		<style type="text/css">
    			div{
    				width:100px;
    				margin:0 auto;
    				border-style: dotted;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div>第一个div</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>块级元素垂直居中</title>
            <style>
                .out {
                    height: 600px;
                    border: 2px solid;
                }
                .in {
                    width: 100px;
                    height: 100px;
                    background: red;
                    margin: 250px auto;
                }
            </style>
        </head>
        <body>
            <div class="out">
                <div class="in"></div>
            </div>
        </body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述
    3、*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值,方便后面设置。示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>margin-top</title>
    		<style type="text/css">
    			*{margin:0;}
    			div,p{border-style: dotted;}
    		</style>
    	</head>
    	<body>
    		<div>第一个div</div>
    		<p>第二个div</p>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述
    4、块级元素的垂直相邻外边距会合并(即外边距合并),合并后的外边距间距等于两个外边距高度中的较大者;行内元素实际上不占上下外边距;行内元素的的左右外边距不会合并;浮动元素的外边距也不会合并。示例如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>外边距的合并</title>
    		<style type="text/css">
    			*{margin:0;}
    			p{border-style: dashed;border-width:1px;}
    			#one{
    				margin-bottom: 100px;
    			}
    			
    			#two{
    				margin-top: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<p id="one">文本段1</p>
    		<p id="two">文本段2</p>
    		<br/>
    		<span>外边距的合并:上面id为one的文段下外边距为100px,id为two的文段上外边距为50px,但从显示的结果上看两者之间的间距取了其中的最大值,而不是两者之和,这就是外边距的合并</span>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			*{
    				margin:0;
    				padding:0;
    			}
    			div{
    				border-style:solid;
    				display:inline;
    			}
    		</style>
    	</head>
    	<body>
    		<div style="margin-left:100px;margin-right:100px;">
    			第一个div标签
    		</div>
    		<div style="margin-left:100px;">
    			第二个div标签
    		</div>
    	</body>
    </html>
    

    运行结果如下图:
    在这里插入图片描述

    展开全文
  • margin合并

    千次阅读 2019-03-01 10:42:53
    从事前端工作的小伙伴都知道margin合并也叫做margin折叠。今天总结如下。 定义 块级元素的上外边距或下外边距有时(直接接触/相邻时)会合并为一个外边距,这种合并行为叫做margin合并。注意浮动元素或者有绝对定位...

    从事前端工作的小伙伴都知道margin合并也叫做margin折叠。今天总结如下。

    定义

    块级元素的上外边距或下外边距有时(直接接触/相邻时)会合并为一个外边距,这种合并行为叫做margin合并。注意浮动元素或者有绝对定位的元素不会发生margin合并的行为。

    合并原则

    正正取最大,负负取最负,正负就相加

    分类

    1. 相邻元素之间margin合并
    相邻元素之间的margin合并规则很简单,按照上述的合并原则进行计算得到一个外边距即可。
    解决方法
    1. 用padding代替margin

    1. 父元素和第一个/最后一个子元素之间margin合并
    以父元素和第一个子元素为例。当第一个子元素设置margin-top时会‘溢出’到父元素上,如果父元素也存在margin-top属性,则按照合并规则进行计算。
    解决方法
    *1. 父元素加border
    2. 父元素添加padding来代替子元素的margin
    3. 父元素加height、min-height、max-height(适用于最后一个子元素的margin合并)
    4. 把父元素设置为BFC(例如添加绝对定位,设置overflow)
    *

    3. 空元素进行margin合并
    如果一个块级元素没有任何内容并且设置了margin-top和margin-bottom时会发生margin合并,合并的规则就是此元素的上下外边距按照合并原则进行计算。举个栗子:

    //html
    <p>aaaaaaaa</p>
    <div class="test"></div>
    <p>bbbbbbbb</p>
    
    //css
    .test{
        margin: 10px 0 20px 0;
    }
    

    此时第一个p元素和第二个p元素之间的间距是20px。
    解决方法
    1. 设置垂直方向的 border;
    2. 设置垂直方向的 padding;
    3. 里面添加内联元素(直接 Space 键空格是没用的);
    4. 设置 height 或者 min-height。

    展开全文
  • margin属性

    千次阅读 2019-09-08 15:50:05
    但是对于margin则相反,元素设定了width值或者保持“包裹性”的时候,margin对尺寸没有影响,只有元素是“充分利用可用空间”状态的时候,margin才可以改变元素的可视尺寸。 (Ps:包裹性具有包裹和自适应性两个特点...
  • 重新认识margin-top和margin-bottom

    千次阅读 2016-11-18 17:21:08
    重新认识margin-top和margin-bottom
  • margin问题

    2017-12-24 21:46:09
    margin塌陷问题就是上下两个相邻的元素之间在都设置了margin值得时候
  • css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距、padding-right:10px; 右内边距、padding-top:10px; 上内边距、padding-bottom:10px; 下内边距。 margin:...
  • margin:auto 和margin:0 auto的区别

    千次阅读 多人点赞 2018-12-26 22:56:36
    margin:auto=margin:auto auto auto auto,表示上下左右都为auto;margin:0 auto=margin:0 auto 0 auto,表示上下为0,左右为auto; 2、居中方式不同。margin:auto表示横竖都居中,margin: 0 auto表示横居中,竖不...
  • margin 重叠

    千次阅读 2017-12-31 21:39:41
    margin重叠发生的情况: 1、只发生在block元素上,不包括float、absolute、inline-block元素 2、只发生在垂直方向上 margin重叠总结如下: 1、相邻兄弟元素<!doctype html> <title>Document
  • margin坍塌

    2017-02-12 10:45:30
    今天在写代码过程中,解决了一个小问题,代码如下。...在.first的div中设置margin-top,效果却是和父div设置margin-top一样,网上又搜了答案总结一下<!DOCTYPE html> <style type="text/css">
  • margin传递问题

    2020-04-21 13:09:26
    margin传递问题   在HTML的嵌套结构中,有时候想用margin来调整位置时发现子类调整会影响到父类!?但是这种传递问题只出现在margin-top,左右下不会有影响! 解决方法: BFC规范; 給父容器添加边框...
  • Matlab中margin函数使用

    千次阅读 多人点赞 2020-07-15 16:39:20
    margin函数 一.margin函数语法 margin(sys) [Gm,Pm,Wcg,Wcp] = margin(sys) [Gm,Pm,Wcg,Wcp] = margin(mag,phase,w) [Gm,Pm] = margin(sys,J1,...,JN) 说明: margin(sys):在屏幕上绘制sys的Bode响应,并在...
  • margin属性总结

    千次阅读 2019-01-29 13:15:16
    margin属性总结 1. 使用 margin:0 auto;的盒子,必须要有width,有明确的width; 2. 只有标准流中的盒子,才能使用 margin:0 auto; 居中,即当一个盒子浮动了,绝对定位了,固定定位了,都不能使用 margin:0 auto;...
  • 问题如下 一段很简单的代码: css如下: &amp;lt;style type=&quot;text/css&quot;&... margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; heig...
  • _marginmargin 区别

    千次阅读 2012-10-26 10:25:57
     margin:15px 300px 0px 100px; height:72px; width:188px; float:left; 以上的CSS样式由于用了float:left; 所以在IE5-IE6中他的margin-left属性是翻倍显示的. 于是出现了不兼容.   _margin: 15px 300px 0 50...
  • 有时在浏览器中浏览会发现没有设定垂直margin的盒子也会有垂直margin的出现,这个现象叫做“collapsing margins”(折叠margin)。“collapsing margins”的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)...
  • Soft Margin VS Hard Margin

    千次阅读 2012-10-04 23:00:04
    I would expect soft-margin SVM to be better even when training dataset is linearly separable. The reason is that in a hard-margin SVM, a single outlier can determine the boundary, which makes the clas
  • JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)

    万次阅读 多人点赞 2017-03-13 10:18:06
    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding、Border 与 Margin 的宽度,四个加起来才是 div 真正占有的宽度。 JQUERY 获取 DIV ...
  • margin-left与left、margin-right与right区别

    千次阅读 2019-04-14 13:08:05
    可扩展为margin-left、margin-top、margin-bottom、margin-right与left、top的区别 1.使用margin-left时,父容器不考虑是否设置了position 2.使用left前提是必须设置本身的position:absolute或relative,否则不生效...
  • margin设置百分比

    2019-01-23 13:32:07
    margin设置百分比是基于父容器的宽度,所以无论是margin-top还是margin-bottom都是基于父容器的宽度。 看如下示例: &lt;style&gt; .fu { width: 400px; height: 300px; background: blue; overflow...
  • margin:auto 与 margin:0 auto 区别

    万次阅读 2016-06-13 22:15:24
    margin的重要性: 有个不容置疑的事,前端开发人员没有人能够忽视CSS margin的重要性。CSS coding时,margin的使用频率就如同呼吸般频繁,如果我可以说得夸张点的话。 margin作为CSS盒模型基本组成要素之一,是非常...
  • css 中p元素自带margin-top,margin-bottom,自已什么都没写就有一个上下边距了 ,很不方便,有什么好的方法吗
  • margin自适应

    千次阅读 2016-08-22 14:20:34
    之前写自适应网页都是用百分比来确定元素的宽度的,但是百分比确定宽度在同一行有两个元素,且第一个元素宽度不需要变动的情况下就不怎么好用了。...后来在网上查了一下,原来还可以使用margin来自适应,
  • 再说margin

    千次阅读 2013-12-05 19:38:20
    这两天看了一个大牛写的margin系列,真是感觉自己弱爆了。里面竟然还有些词汇我都看了解释都还不懂。所以今天试着仔细看下,但是和人家大牛的比肯定是小巫见大巫了。  这里我遇到什么就提什么,着重一些我以前没有...
  • CSS margin百分比

    2017-02-15 14:16:42
    margin百分比取值
  • 在垂直方向上,margin值合并问题,如果两个同级的块级元素,上边的一个盒子设置margin-top,下面的一个盒子设置margin-top,两个盒子之间的距离,并不是他们的margin之和,而是取最大的那个值. 总结:我们在写代码的时候,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 134,481
精华内容 53,792
关键字:

margin