我所遇到的margin-top 与top的区别

最新推荐文章于 2024-05-24 15:47:11 发布
最新推荐文章于 2024-05-24 15:47:11 发布
阅读量795 收藏 2
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27425537/article/details/57988390
版权
本文详细解释了CSS盒模型中的margin-top和top属性的区别与用法。margin-top用于设置元素与其父容器之间的上边距，而top属性则用于实现元素的绝对定位。文章还介绍了这些属性如何与其他position属性配合使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

margin-top 指的的在盒模型中相对于父级元素的top边距,默认position属性为relative

top指的是所在元素与电脑屏幕的之间的顶部不变,是一个绝对的定位,在使用的

     过程中要与position属性搭配着来使用.PS:一般position都是设置为absoulte,或者设置

    fixed;

同理 margin-bottom,margin-left,margin-right,padding等属性也是类似.

关于margin-top兼容问题
weixin_53278262的博客
12-21 603
关于margin-top兼容(传递)问题,我相信不少小伙伴在日常生活中经常遇到吧,我先举个栗子吧,这样便于大家理解 html代码: <div class="box"> <div class="child"></div> </div> css代码: * { margin: 0; padding: 0; } .box {
关于DIV margin-top失效的解决办法
web开发技术
07-26 1359
用DIV+CSS布局网页内容时，常常会遇到一个问题：就是当前DIV样式设置了上边界缩进margin-top属性，但是显示出来的效果却是没有缩进。这种情况出现在前面放置的DIV设置了浮动属性， 后跟着的Div的上边界缩进就不能正常显示。下面我们分析两种情况，代码如下： <div style="width:500px; float:left; height:300px; margin:5px">此处显示新 Div 标签的内容</div> <div style="wi
css中margin-top和top有什么区别
前端知识库
05-10 4466
一、功能不同 margin-top：功能为设置元素的上外边距。 top：规定元素的顶部边缘。 二、特点不同 margin-top：允许使用负值。定义固定的上外边距。默认值是 0。 top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 三、总结 margin-top是你这个层的边距设置，是上边距，top是当css样式为绝对定位（即position:absolute; ）时，left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位
top和margin-top的区别
guolinengineer的博客
12-18 7254
top、margin-top的区别： 1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body  或者  position：relative的父级元素的绝对定位。mar...
top、margin-top的区别
u010227447的专栏
06-07 2554
简单说一些top、margin-top的区别： 1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。 注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body  或者  position：rela
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
本文探讨了在使用CSS定位属性position: fixed的同时，给同级元素添加margin-top所产生的布局问题，并提供了一些解决方案。 在HTML文档结构中，通常将元素分为头部（header）、内容区（content）、侧边栏（aside）和...
firefox margin-top失效的原因与解决办法
10-30
在Web开发过程中，我们可能会遇到这样一个问题：使用`margin-top`属性本来是为了实现元素的上边距效果，但在某些浏览器中，比如Firefox，这个属性似乎并没有按预期工作，导致上边距没有正确显示。这便是本篇文档要...
IE7、IE8、ff下的margin-top问题 折叠margin
09-25
今天小组一同学做网站时，遇到一个关于margin-top兼容问题：有两个div,其中div1嵌套div2,而在div2里面设置margin-top后，在IE8、ff和chrome下显示的效果竟然不是想要出现的结果，而在IE7下面效果正确。
top 与 margin-top的区别
shaoduo的博客
12-16 1333
top、margin-top的区别： 1、top、bottom、left、right是绝对定位，必须设置position为absolute。margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。 ...
css中top和margin-top的区别
boyzhoulin的专栏
09-01 2007
最近学习CSS，碰到了这个问题，所以记录下来。
CSS中的四种定位以及top和margin-top的区别
热门推荐
稀饭
09-01 2万+
CSS中一共有四种定位分别是默认，相对，绝对，固定 1，position：static，这种定位是默认的，一般没什么实际的作用。 2，position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置 3，position：absolute，绝对定位，这种定位脱离文...
当使用定位时，margin-top和top 同时使用时，值最大的起作用
leechoy
06-18 411
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div { position: fixed; top: 10px; margin-top: 100px; width: 200px; height: 300px; background-c.
top和margin-top等的区别
梦想还是要有的，万一实现了呢
02-02 3379
转载自：点击打开链接 这一次因为是拿着别人的源码改成自己要的效果，我发现原来我之前一直都只会用margin-top、margin-bottom等是多傻的举动！因为在某些时候top、bottom、left、right比margin-top、margin-bottom、margin=left、margin-right好用很多。。。 当时我觉得很纳闷，难道top系列和margin-top系列不是一个
CSS定位（position属性）以及top和magin-top的区别
my_learning_road的博客
10-22 3016
CSS position 属性可以选择 4 种不同类型的定位： static 默认定位，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中——这种定位是默认的，一般没什么实际的作用。 relative 相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bot
margin相关技巧以及margin-top塌陷问题
qq_45516629的博客
03-13 444
使用相关技巧 1、设置元素水平居中： margin: 0 auto; 2、负边距+定位：水平垂直居中 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 3、margin负值让元素位移及边框合并 外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度...
margin-top属性
sinat_38992528的博客
05-24 393
margin-top不要影响兄弟元素
最新发布
03-08
用户可能遇到了布局上的问题，比如设置了一个元素的margin-top，但发现上面的兄弟元素并没有被推开，或者产生了意外的折叠现象。 接下来，我需要回忆CSS的盒模型和外边距合并（margin collapsing）的规则。根据W3C...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值