margin-top

margin-top在html中的意思是什么
千次阅读

2021-07-10 04:25:50

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

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

CSS margin-top 属性

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

注意：负值是允许的。

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

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

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

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

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

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

示例：

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

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

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

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

效果图：

更多编程相关知识，请访问：编程视频！！

更多相关内容
margin-top塌陷问题的现象与解决的具体方法
2020-09-22 11:24:15

主要介绍了margin-top塌陷问题的现象与解决的具体方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收起
css中子元素设置margin-top为什么影响了父元素
2020-12-11 17:45:55

本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...

收起
margin-top负值解决label 文字与input 垂直居中对齐问题
2020-09-28 06:18:08

label 文字与input 垂直居中对齐不容易调好，不过使用margin-top负值可解决label文字与input垂直居中对齐问题

收起

详述外边距样式属性(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样式属性设置元素的上外边距，该属性有多个值：值描述 ...

文章目录

一、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-top，margin-bottom之间的合并问题

2021-03-20 09:53:07

CSS中，margin-top和margin-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没有合并。

收起

展开全文

html5 css3 css html 前端

CSS--解决margin塌陷(margin-top失效)--实例
千次阅读 2021-12-02 23:11:20
下述场景会导致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
结果
收起
展开全文
css 前端 html
css设置margin-top失效及解决办法
2020-10-26 14:35:53

一、兄弟元素之间margin-top失效先看下面代码： <div> <div class="box1"> float: left </div> <div class="box2"> clear:both; margin-top:20px; </div> <

收起
关于移动端H5中margin-top和margin-bottom的小结
千次阅读 2019-08-05 17:11:18

1、在父子级嵌套的情况下，子级的margin-top会对父级产生影响； 2、根节点div的height=100vh时候，margin-bottom在浏览器中正常，在手机上不生效；在两个容器嵌套时，子集的margin-top作用于父级元素上。代码如下...

收起
CSS设置margin-top失效及解决办法
2020-10-31 10:00:00

在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况：1、兄弟元素之间ma...

收起

css html css3 html5 less
css中子元素设置margin-top会影响到父元素
千次阅读 2019-11-11 23:43:15

demo代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content_top{ width: 500p...

收起

CSS
margin-top设置为50%会有什么效果
2021-08-30 17:29:08

冷知识：子元素margin-top的50%是父元素宽度的一半

收起

css html
margin-top用法
千次阅读 2020-01-28 21:39:08

例：margin-top:10px; 10px相当于微信小程序中的20rpx，rpx为微信小程序的单位。

收起
css中的子元素设置margin-top或者margin-bottom作用到父元素上的问题
千次阅读 2018-04-26 14:41:18

写页面的时候要实现这样一个效果要求：图标之间有一条线进行连接，最上边和最...left,然后每条数据设置一个margin-left的负值，每条数据之间的间距用margin-bottom来设置，具体实现如下<!doctype html&gt...

收起

css布局 css伪元素添加图片
top和margin-top的区别
千次阅读 2018-12-18 17:59:02

top、margin-top的区别： 1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些...

收起
el-dialog修改弹框到顶部的高度margin-top
千次阅读 2021-01-04 14:36:11

el-dialog组件中 style() { let style = {}; if (!this.fullscreen) { style.marginTop = this.top; if (this.width) { style.width = this.width; } } return style; } 说明style.marginTop =

收起

vue.js 前端
CSS中的四种定位以及top和margin-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重叠问题，看如下示例： <div class="div1"> <div class="div2"> </div> </div> .div1{ width:200px; ...

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

重新认识margin-top和margin-bottom

收起
margin-top=10%，这10%居然是相对于父元素的宽度，宽度？
2022-01-27 09:22:09

margin-top=10%，这10%竟然是相对于父元素的宽度，宽度？！

收起

css3 css javascript
当margin-top、padding-top的值是百分比时，分别是如何计算的？
千次阅读 2020-09-24 18:35:02

CSS 百分比参照问题参照父元素宽度的元素：... 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度 ...

收起
css3 margin-top:% 百分比以谁为标准的问题
千次阅读 2019-06-09 19:50:34

<!DOCTYPE html> <html> <head> <title>定位</title> <style> *{ margin:0px; padding:0px; } .container{ ...

收起

css3
微信小程序遇到margin-top无效的解决方法
2020-12-17 19:23:37

如果你的代码格式类似这样 <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失效先看下面代码： <div> <div class="box1"> float: left </div> &...

收起
margin-top,padding-top的值是百分比时，分别是如何计算的
2019-12-11 14:46:13

之前一直以为margin-top和padding-top为百分比时是相对与父级块级元素的高度的，之后在使用的时候发现margin-top为百分比是不太对，百度一下才知道是自己之前的想法是错误的，在这记录一下 margin-top和padding-top...

收起
关于内层DIV设置margin-top不起作用的解决方案
千次阅读 2020-11-22 13:54:31

关于内层DIV设置margin-top不起作用的解决方案

收起

HTML+CSS
CSS top、margin-top和padding-top的区别
2018-07-11 09:48:06

CSS margin 属性top、margin-top的区别padding指内边距，是盒子里面内容到边框的距离，不允许使用负值。padding:10px 5px; 上内边距和下内边距是10px，右内边距和左内边距是5px。padding:1px 2px 3px 4px; (上右下左...

收起
padding-top、margin-top和top的区别
千次阅读 2018-05-28 21:46:04

padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内...margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不包含在容器内； top:10px;是指容器本身的顶部距离页面的顶端有10个像素

收起

margin-top塌陷问题的现象与解决的具体方法

css中子元素设置margin-top为什么影响了父元素

margin-top负值解决label 文字与input 垂直居中对齐问题

详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)

文章目录

一、margin-top样式属性

二、margin-right样式属性

三、margin-bottom样式属性

四、margin-left样式属性

五、margin样式属性

学习笔记——margin-top，margin-bottom之间的合并问题

1. margin-top具有继承性

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

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

CSS--解决margin塌陷(margin-top失效)--实例

简介

margin合并(塌陷)的场景

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

问题复现

解决方案

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

问题复现

解决方案

css设置margin-top失效及解决办法

关于移动端H5中margin-top和margin-bottom的小结

CSS设置margin-top失效及解决办法

css中子元素设置margin-top会影响到父元素

margin-top设置为50%会有什么效果

margin-top用法

css中的子元素设置margin-top或者margin-bottom作用到父元素上的问题

top和margin-top的区别

el-dialog修改弹框到顶部的高度margin-top

CSS中的四种定位以及top和margin-top的区别

margin-top重叠问题

重新认识margin-top和margin-bottom

margin-top=10%，这10%居然是相对于父元素的宽度，宽度？

当margin-top、padding-top的值是百分比时，分别是如何计算的？

css3 margin-top:% 百分比以谁为标准的问题

微信小程序遇到margin-top无效的解决方法

margin-top塌陷问题的现象与解决

常见margin-top失效的情况

margin-top,padding-top的值是百分比时，分别是如何计算的

关于内层DIV设置margin-top不起作用的解决方案

CSS top、margin-top和padding-top的区别

padding-top、margin-top和top的区别