精华内容
下载资源
问答
  • 文章目录一、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-leftleftmargin-right与right区别

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

    margin-left与left区别
    可扩展为margin-left、margin-top、margin-bottom、margin-right与left、top的区别
    1.使用margin-left时,父容器不考虑是否设置了position
    2.使用left前提是必须设置本身的position:absolute或relative,否则不生效,top等亦是如此
    margin与padding区别
    1.margin:0 auto 表示距离顶部0其它按浏览器自适应,margin:10% 20%;表示距离上下10%;左右20%
    margin表示外间距,容器外部距离其它容器的间距
    2.padding:表示容易内间距,容器内的内容距离容器本身个边上的间距,不允许使用负值
    试容器居中的方式
    设置定位:距离顶部top50%,则容器整体距离顶部50%; margin-top: -400px;距离顶部-400px;表示容器的一半大小;刚好居于中间
    width:800px;
    height:800px;
    position: absolute;
    top: 50%;
    margin-top: -400px;
    left: 50%;
    margin-left: -400px;

    展开全文
  • padding-left, margin-leftleft以及padding-inline-start都能在一定的情况下起到令元素由左向右位移的效果(靠左距离)。 在这里padding-left(内边距)和margin-left (外边距)可以直接从console里的box model...

    padding-left, margin-leftleft以及padding-inline-start都能在一定的情况下起到令元素由左向右位移的效果(靠左距离)。

    在这里padding-left(内边距)和margin-left (外边距)可以直接从console里的box model反映出。给左内边距padding-left 30像素,左外边距margin-left 20像素 - 如下图所示

    box model1
    动画
    代码如下:

    <html>
    <head>
        <style>
            .body{
                padding-left: 30px;
                margin-left: 20px;
            }
            .test{
                width: 100px;
                height: 100px;
                background: slateblue;
            }
        </style>
    </head>
    
    <body>
        <div class="body">
            <div class="test"></div>
        </div>
    </body>
    </html>
    

    left在一般情况下无法使用。如果对上述的 .body div 里直接设置left的话,box model不会发生任何改变。但如果对 .body设置绝对定位(position absolute)的话,则会在外边距以外形成靠左距离。在 .body 里添加了position:absolute以及left:40px

    boxmodel2
    left

    添加位置与left后的body

    .body{
        padding-left: 30px;
        margin-left: 20px;
        position: absolute;
        left: 40px;
    }
    

    padding-inline-start的作用取决于inline的方向。如果是由左向右的水平(horizontal)方向,则会overwrite padding-left之前设定的值。假设在之前代码的基础上加入padding-inline-start: 50pxbox model的左内边距会由30变成50:
    在这里插入图片描述

    代码:

    .body{
        padding-left: 30px;
        margin-left: 20px;
        position: absolute;
        left: 40px;
        padding-inline-start: 50px;
    }
    

    在其他情况下,padding-inline-start有可能会起到padding-toppadding-right,或者padding-bottom的作用。这些取决于writing-mode, direction, and text-orientation.

    以下是从MDN搬来的事例:
    padding-inline-start

    展开全文
  • 在flex布局中,想实现布局左右浮动效果,可以在第二个容器加上 margin-right:auto 或给第一个加上 margin-left:auto

    在flex布局中,想实现布局左右浮动效果,可以在第二个容器加上 margin-right:auto

    或给第一个加上 margin-left:auto

    展开全文
  • margin-left是什么意思

    千次阅读 2020-04-27 19:34:17
    margin属性是用于设置元素的外边距,所以margin-left 属性就是用于设置元素的左外边距。下面我们就来看看margin-left的详细内容。 margin-left属性和margin属性一样所有的主流浏览器都支持这个属性 margin-left...
  • 比喻 我上下两个DIV 下面的DIV margin-top的像素是和上一个DIV有关 而我左右两个 DIV margin-left 像素不是和左边的DIV有像素间距 而是和屏幕的边缘有关系 不知道描述的清楚不
  • Margin-left无效的原因

    2020-11-20 16:45:45
    Margin-left无效的原因 这是在360浏览器下图片 这是在火狐浏览器下的图片 代码没有改动,换个浏览器就好, margin-left本身不兼容IE6
  • width、margin-leftmargin-right使用auto

    千次阅读 2013-04-06 21:24:58
    CSS中框的水平格式编排的七个属性中,能够设置为auto的有三个属性,就是width、margin-leftmargin-right。下面就其具体设置为auto时的一些情况予以说明:    1、三个属性均未设置为auto    当这三个属性都...
  • 最近在做一个类似赚一兜应用的分享网页,需要适配到手机端,遇到一个问题,就是如果设置文章的padding-left,padding-right或margin-left,margin-right时,手机上查看手指触摸滑动会左右摇晃页面,试过各种方法,最后...
  • 为什么margin-left能用,而有时候margin-right却没有用? 浏览器默认从左向右渲染,所以元素是从左向右排列的,margin-right其实有效果的,只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢?想到这...
  • 乍一看我以为这两者是一样的.. 然后,测试一下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&... margin: 0; padding: 0;
  • 初次接触小程序前端,碰到一个需求就是要让text距离其父组件view两边相同距离,但经过设置之后发现margin-left,padding-left可以用,但这样text文本就会超出view宽度范围,所以我在text上又套了一层view做其父组件,...
  • 理解margin-left:-100%

    千次阅读 2019-09-20 18:41:36
    最近看到三栏式布局,发现里面的margin-left: -100%;不太理解,这里记录一下 margin-left: -100%;是什么意思呢?意思就是向左移动整个屏幕的距离 但是在三栏式写法(其中一种)里面的盒子却是可以移动到上图的...
  • div+css - CSS标准 - 8.3 Margin properties: margin-top, margin-right, margin-bottom, margin-left, and margin - 8.3边距属性8.3 Margin properties: margin-top, margin-right, margin-bottom
  • IE3像素bug 非float元素使用了margin-leftmargin-right
  • 如果需要某个元素相对定位到父级元素的某个位置, 那个需要给父级元素加”position: absolute;",给子元素加“position:relative", ... margin-left: 30%", 因为这样可能造成在某些浏览器不支持
  • CSS布局--使用margin-left负值布局

    千次阅读 2015-07-20 07:48:23
    CSS布局--使用margin-left负值布局 如下图所示,在一个容器中整齐排列N行、N列宽度固定的元素,并且元素与容器左右没有间距: 一种方法是,设置li的margin-right值,然后使用js遍历li为第(n+1)%4==0的...
  • css中margin-leftleft的区别

    千次阅读 2016-05-16 15:53:09
    1,left left只要在设置 过定位位置position的情况下生效, 且 position: relative;或者position: absolute; 2,margin-left margin-left是元素的外边距
  • table{margin-left:2cm} td {padding-left: 2cm} 这个表格单元拥有左内边距。
  • div设置 margin-left, margin-right 为 auto 时在IE的怪异模式下不居中测试环境:IE7、IE8解决办法:在怪异模式下设置text-align:center;*html body { text-align:center;}如果body前加上*html 在开发工具的body元素...
  • 设置margin-left后变成这个样子,本想着把margin-right设置出来应该就会恢复原样。 ![图片说明](https://img-ask.csdn.net/upload/201703/02/1488447215_24263.png) 但发现这时候的margin-right的值无论多大都没有...
  • #login_box { width: 300px; height: 150px; background: #eee; border: 1px solid #ccc; position: absolute; left:50%; top:50%; margin-left: -150px;
  • 当网页不能居中的时候,用一下这个就知道厉害了。 div#container{ margin-left:auto; margin-right:auto; width:168px; }
  • 今天在学习使用grid布局的过程中偶然发现...常规流中的块级非置换元素需要满足: 'margin-left' + 'border-left-width' + padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' ...
  • HTML里margin-leftleft的区别

    千次阅读 2014-10-14 16:30:25
    设置margin-left则只会出现在父对象的左边的相对位置,不考虑是否设置了position。
  • 任务: 1、使用浮动实现#left和#mid横向两列排版,并且两者之间有13px间距; 2、使用position定位方法实现#right的自适应...margin-left不是设置左外边的吗?为什么左外边距要设置为792,mid和right的间距不是17px吗?
  • jquery 设置css margin-left

    万次阅读 2017-09-06 17:50:50
    $("#sanjiaoLeft").css("marginLeft",val); $("#sanjiaoLeft").css({"margin-left": val, "background-color": "blue" });
  • margin-left: auto; } 上面的代码可以使得div靠近浏览器的右侧显示是为什么? 有点弱智的问题,竟然现在才知道...记录一下 The following constraints must hold among the used values of the other properties...
  • margin-left: auto;元素右对齐 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J26GDXEu-1575464621703)(Snipaste_2019-12-04_20-46-53.png)] 要实现上述右对齐的方式有很多,比如: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 459,840
精华内容 183,936
关键字:

margin-left