精华内容
下载资源
问答
  • margin-top在html中的意思是什么
    千次阅读
    2021-07-10 04:25:50

    在html中margin-top的意思为“上边距”,是用于设置元素的上部边距的一个css属性;其语法格式为“margin-top:auto|length|%;”,允许设置负值。

    b2d0351a5fbe28e0da7474adffd8cb75.png

    本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    819ff254b44a03ba17c039f442a91825.png

    CSS margin-top 属性

    margin-top属性设置元素的上部边距。

    注意: 负值是允许的。

    语法:margin-top:auto|length|%|inherit;

    属性值:auto:浏览器设置的上外边距。

    length:定义固定的上外边距。默认值是 0。

    %:定义基于父对象总宽度的百分比上外边距。

    inherit:规定应该从父元素继承上外边距。

    【推荐教程:CSS视频教程 、《html视频教程》】

    示例:

    p.ex1 {margin-top:2cm;}

    一个没有指定边距大小的段落。

    一个2厘米上边距的段落。

    一个没有指定边距大小的段落。

    效果图:

    f05301ccd83182107a4b27f47ec0bd07.png

    更多编程相关知识,请访问:编程视频!!

    更多相关内容
  • 主要介绍了margin-top塌陷问题的现象与解决的具体方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
  • label 文字与input 垂直居中对齐不容易调好,不过使用margin-top负值可解决label文字与input垂直居中对齐问题
  • 文章目录一、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>
    

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

    展开全文
  • CSS中,margin-topmargin-botttom有一些特殊性。它们会在某种情况之间相互合并,并且会将值最大的那个当作外边距的值。 1. margin-top具有继承性 当两个盒子是父子关系时,对父元素设置margin-top,子元素也...

    CSS中,margin-top和margin-botttom有一些特殊性。它们会在某种情况之间相互合并,并且会将值最大的那个当作外边距的值。 

     


    1. margin-top具有继承性

    当两个盒子是父子关系时,对父元素设置margin-top,子元素也相当于有了相同的margin-top。

                .box1 {
                    margin-top: 20px;
                    width: 200px;
                    height: 200px;
                    background-color: #000000;
                }
                .box2 {
                    width: 100px;
                    height: 100px;
                    background-color: #0000FF;
                }
            <div class="box1">
                <div class="box2"></div>
            </div>

     

    2.margin-top,margin-bottom会合并

    当两个盒子是父子关系或者上下兄弟关系时,设置margin-top,margin-bottom。两个盒子之间的margin-top,margin-bottom会合并,取最大的值当作共同的外边距。

                // 上述CSS代码修改
                .box2 {
                    margin-top: 30px;
                    width: 100px;
                    height: 100px;
                    background-color: #0000FF;
                }

     

    如图:两个盒子margin-top合并成为一个,子元素的较大,所以最终的外边距以子元素的为准。

                .box1 {
                    margin-bottom: 60px;
                    width: 200px;
                    height: 200px;
                    background-color: #000000;
                }
                .box2 {
                    margin-top: 30px;
                    width: 100px;
                    height: 100px;
                    background-color: #0000FF;
                }
            <div class="box">
                <div class="box1"></div>
                <div class="box2"></div>
            </div>

     如图:当两个盒子为上下兄弟关系时,下边盒子的margin-top和上边盒子的margin-bottom会合并,上边的外边距比较大,所以最终外边距为上盒子的margin-bottom

    3.margin-top,margin-bottom“不”会合并

    有时候,当使用弹性布局时,上下兄弟盒子的外边距不会合并。

                .box {
                    display: flex;
                    flex-direction: column;
                }
                .box1 {
                    margin-bottom: 60px;
                    width: 200px;
                    height: 200px;
                    background-color: #000000;
                }
                .box2 {
                    margin-top: 30px;
                    width: 100px;
                    height: 100px;
                    background-color: #0000FF;
                }
            <div class="box">
                <div class="box1"></div>
                <div class="box2"></div>
            </div>

    如图:两个兄弟盒子之间的外边距,为上盒子margin-bottom和下盒子margin-top之和。margin-top和margin-bottom没有合并。

    展开全文
  • 下述场景会导致margin合并: 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上/下外边距会发生合并。 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上...

    原文网址:CSS--解决margin塌陷(margin-top失效)--实例_IT利刃出鞘的博客-CSDN博客

    简介

            本文介绍如何解决margin合并的问题。包括父子元素的合并和兄弟元素的合并。

    margin合并(塌陷)的场景

            当2个垂直外边距相遇时,他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。 

    下述场景会导致margin合并:

    1. 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上/下外边距会发生合并。
    2. 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
    3. 当一个空元素没有边框或填充时,上下外边距碰到了一起,也会发生合并。

    实例1:父子元素外边距合并

            但在Chrome和FireFox会出现这种情况,在IE6 IE7中均显示正常,这恰恰说明了IE是不符合规范的,而Chrome和FireFox则是严格遵守规范的。

    需求:子元素相对于父元素向下偏移50px。

    问题复现

    代码

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            body {
                margin: 0;
            }
    
            .outer {
                width: 400px;
                height: 300px;
                background-color: yellow;;
            }
    
            .inner {
                width: 200px;
                height: 200px;
                margin-top: 50px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
    
    <div class="outer">
        <div class="inner"> </div>
    </div>
    
    <script>
    
    </script>
    </body>
    </html>
    

    结果 

    可以看到,子元素和父元素同时向下偏移了50px。而我们想要的是只子元素向下偏移。

    解决方案 

    1. 设置父元素:overflow:hidden;(推荐)
    2. 设置父元素:float: left;
    3. 设置父元素:border:1px solid;    (大于0且style不为none)
    4. 设置父元素:padding:1px;   (大于0)
    5. 设置父元素:填充一定的内容。 
    6. 设置父元素或者自身:display:inline-block;
    7. 设置父元素或者自身:position:absolute;

    上边任意一种解决方案,都能产生如下正确的结果:

    实例2:兄弟元素外边距合并

    需求:上边的元素下边界距离下边的元素的上边界300px

    问题复现

    上边的元素下外边距设置为200px,下边的元素的上外边界100px。

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            body {
                margin: 0;
            }
    
            .upper {
                width: 400px;
                height: 300px;
                margin-bottom: 200px;
                background-color: yellow;;
            }
    
            .lower {
                width: 200px;
                height: 200px;
                margin-top: 100px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
    
    <div class="upper"></div>
    <div class="lower"></div>
    
    </body>
    </html>
    

    结果

    距离只有200px。(肉眼就可以看出,两个的距离和下边粉色方框的高度(200px)差不多。)

    解决方案

    1. 下边的元素:增加float属性。例如:float: left

    结果

     

    展开全文
  • 一、兄弟元素之间margin-top失效 先看下面代码: <div> <div class="box1"> float: left </div> <div class="box2"> clear:both; margin-top:20px; </div> <
  • 1、在父子级嵌套的情况下,子级的margin-top会对父级产生影响; 2、根节点div的height=100vh时候,margin-bottom在浏览器中正常,在手机上不生效; 在两个容器嵌套时,子集的margin-top作用于父级元素上。代码如下...
  • 在web网站开发中,有时候我们给html元素设置的margin-topmargin-bottom属性,但是无效,并没有取到任何作用,这是什么原因呢?常出现两种情况:1、兄弟元素之间ma...
  • demo代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content_top{ width: 500p...
  • 冷知识:子元素margin-top的50%是父元素宽度的一半
  • margin-top用法

    千次阅读 2020-01-28 21:39:08
    例:margin-top:10px; 10px相当于微信小程序中的20rpx,rpx为微信小程序的单位。
  • 写页面的时候要实现这样一个效果要求:图标之间有一条线进行连接,最上边和最...left,然后每条数据设置一个margin-left的负值,每条数据之间的间距用margin-bottom来设置,具体实现如下&lt;!doctype html&gt...
  • topmargin-top的区别

    千次阅读 2018-12-18 17:59:02
    topmargin-top的区别: 1、top、bottom、left、right是绝对定位,必须设置position为absolute。 margin一系列设置是相对定位。注意:如果用top等,而position未设置为absolute,那设置是不起作用的。 2、top这些...
  • el-dialog组件中 style() { let style = {}; if (!this.fullscreen) { style.marginTop = this.top; if (this.width) { style.width = this.width; } } return style; } 说明style.marginTop =
  • CSS中的四种定位以及topmargin-top的区别

    万次阅读 多人点赞 2019-09-01 13:29:46
    2,position:relative,相对定位 ,不会脱离文档流,类似于static,按顺序排列,一般设置也不会有什么变化,可以通过margin-top/right/bottom/left来改变框的位置 3,position:absolute,绝对定位,这种定位脱离文....
  • margin-top重叠问题

    千次阅读 2018-10-09 11:11:55
    父子div的margin-top重叠问题,看如下示例: &lt;div class="div1"&gt; &lt;div class="div2"&gt; &lt;/div&gt; &lt;/div&gt; .div1{ width:200px; ...
  • 重新认识margin-topmargin-bottom

    千次阅读 2016-11-18 17:21:08
    重新认识margin-topmargin-bottom
  • margin-top=10%,这10%竟然是相对于父元素的宽度,宽度?!
  • CSS 百分比参照问题 参照父元素宽度的元素:... 特殊:相对定位的时候,top(bottom) left(right)参照的是父元素的内容区域的高度与宽度,而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度 ...
  • <!DOCTYPE html> <html> <head> <title>定位</title> <style> *{ margin:0px; padding:0px; } .container{ ...
  • 如果你的代码格式类似这样 <view class="v1"> <view class="v2"> </view> </view> 那么解决的方法就是 wxss文件中添加 .v1{ overflow: hidden; }
  • margin-top塌陷问题的现象与解决

    万次阅读 2018-05-26 14:55:32
    margin-top塌陷问题 什么是margin-top塌陷 margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想让子元素的边框距离父元素...
  • 常见margin-top失效的情况

    千次阅读 2018-07-16 20:07:10
    关于margin-top失效, 常出现两种情况: (一)兄弟元素之间margin-top失效 先看下面代码: &lt;div&gt;   &lt;div class="box1"&gt; float: left &lt;/div&gt;   &...
  • 之前一直以为margin-top和padding-top为百分比时是相对与父级块级元素的高度的,之后在使用的时候发现margin-top为百分比是不太对,百度一下才知道是自己之前的想法是错误的,在这记录一下 margin-top和padding-top...
  • 关于内层DIV设置margin-top不起作用的解决方案
  • CSS margin 属性topmargin-top的区别padding指内边距,是盒子里面内容到边框的距离,不允许使用负值。padding:10px 5px; 上内边距和下内边距是10px,右内边距和左内边距是5px。padding:1px 2px 3px 4px; (上右下左...
  • padding-topmargin-toptop的区别

    千次阅读 2018-05-28 21:46:04
    padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内...margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不包含在容器内; top:10px;是指容器本身的顶部距离页面的顶端有10个像素

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 463,720
精华内容 185,488
关键字:

margin-top

友情链接: EA - Budak Ubat (Hedge).zip