css中margin-top和top有什么区别

最新推荐文章于 2025-04-15 09:59:53 发布
原创 最新推荐文章于 2025-04-15 09:59:53 发布 · 4.7k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细阐述了CSS中margin-top与top属性的功能区别。margin-top用于设置元素的上外边距，而top则用于规定元素顶部边缘的位置。此外，文章还介绍了两者的特点，包括margin-top允许使用负值和默认值为0，top则定义了元素的上外边距边界与包含块上边界之间的偏移。

一、功能不同

  • margin-top：功能为设置元素的上外边距。
  • top：规定元素的顶部边缘。

二、特点不同

  • margin-top：允许使用负值。定义固定的上外边距。默认值是 0。
  • top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

三、总结
margin-top是你这个层的边距设置，是上边距，top是当css样式为绝对定位（即position:absolute; ）时，left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位

CSS中的四种定位以及top和margin-top的区别
热门推荐
稀饭
09-01 2万+
CSS中一共有四种定位分别是默认，相对，绝对，固定 1，position：static，这种定位是默认的，一般没什么实际的作用。 2，position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置 3，position：absolute，绝对定位，这种定位脱离文...
top和margin-top的区别
guolinengineer的博客
12-18 7369
top、margin-top的区别： 1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body  或者  position：relative的父级元素的绝对定位。mar...
重新认识margin-top和margin-bottom
gaohuanjie的专栏
11-18 1万+
重新认识margin-top和margin-bottom
CSS——对position定位和margin-top的理解
FHHHC的博客
11-29 1426
一、常见定位方式 1.positon：absolute (脱离文档流) 　　生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位(这里的父元素是指定位方式为relative和absolute的父元素)。 如果一直没找到 relative或者absolute定位的第一个父元素，则父元素为body。 绝对定位元素的位置通过 "left", "top", "right" 以及 ...
php 中margin-top,margin-top是什么意思-css编程词典-php中文网
weixin_39788256的博客
04-02 2295
margin英 [ˈmɑ:dʒɪn] 美 [ˈmɑ:rdʒən]n.边缘，范围;极限;利润，盈余;(版心外)的空白vt.留边;成为…的边;加边于，围绕;为…加旁注复数： marginstop英 [tɒp] 美 [tɑ:p]n.顶，顶部;(箱子)盖，(书页等的)上栏;首席;陀螺adj.最高的;顶上的;头等的;最大的vt.形成顶部;达到…的顶端;处于…的最前头;领导vi.总结;超越;高耸;结束...
CSS top、margin-top和padding-top的区别
王景迁的博客
07-26 1万+
参考文献 CSS padding 属性 CSS里的padding是什么意思？ CSS margin 属性 top、margin-top的区别 padding指内边距，是盒子里面内容到边框的距离，不允许使用负值。 padding:10px 5px; 上内边距和下内边距是10px，右内边距和左内边距是5px。 padding:1px 2px 3px 4px; (上
css中top和margin-top的区别
boyzhoulin的专栏
09-01 2068
最近学习CSS，碰到了这个问题，所以记录下来。
子DIV块中设置margin-top时影响父DIV块位置问题
hahhahahaa的博客
06-13 1万+
相信很多前端同学在做页面开发的时候都遇到过这样的问题。给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。如下面的代码.a { width:100px; height:100px; } .b { width:50px; height:50px; margin-top:10px; } <div class="a">...
CSS基础：margin属性4种值类型，4个写法规则详解
u013179804的博客
04-15 1万+
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gz.h后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中。
CSS——top和margin-top
chengzhangdewo的博客
10-12 629
1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。 ...
CSS篇：彻底搞懂CSS百分比边距：margin-top和padding-top的计算原理
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-15 1564
理解CSS百分比边距的计算原理，可以帮助我们避免很多布局上的困惑，也能让我们更精准地控制页面元素的空间关系。记住这个简单的规则：在CSS中，垂直方向的百分比边距（margin/padding-top/bottom）都是基于包含块的宽度计算的。
CSS定位（position属性）以及top和magin-top的区别
my_learning_road的博客
10-22 3146
CSS position 属性可以选择 4 种不同类型的定位： static 默认定位，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中——这种定位是默认的，一般没什么实际的作用。 relative 相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bot
margin-top属性
sinat_38992528的博客
05-24 560
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)
IT_Helianthus的博客
05-20 9390
文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距，该属性有多个值： 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...
CSS - 你遇到过子元素设置margin-top，影响父元素的情况吗
xingyu_qie的专栏
04-07 1413
例如在一个div盒子元素内，需要设置一个标题，我们用一个p标签做为这个标题元素。根据UI设计要求，标题元素需要距离父div元素20px，理所当然想到的就是为标题元素设置margin-top为20px，希望可以撑开距离顶部的距离。但根据经验可知，这样做是存在问题的，父div元素会紧跟着p元素向下20px，并没有达到撑开20px的效果。先来看一下最初的代码和下图的效果。
top 与 margin-top的区别
shaoduo的博客
12-16 1438
top、margin-top的区别： 1、top、bottom、left、right是绝对定位，必须设置position为absolute。margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。 ...
html5中top什么意思,margin-top在html中的意思是什么
weixin_42340136的博客
07-09 3756
在html中margin-top的意思为“上边距”，是用于设置元素的上部边距的一个css属性；其语法格式为“margin-top:auto|length|%;”，允许设置负值。本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。CSS margin-top 属性margin-top属性设置元素的上部边距。注意： 负值是允许的。语法:margin-to...
padding-top、margin-top和top的区别
weixin_34212762的博客
11-19 259
padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的；margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不包含在容器内；top:10px;是指容器本身的顶部距离页面的顶端有10个像素举例： <table> <tr> <td>11</td> </tr> </tab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值