css中块级标签设置margin-top属性作用于父容器

最新推荐文章于 2025-04-07 16:11:59 发布
最新推荐文章于 2025-04-07 16:11:59 发布
阅读量692 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TabLayout/article/details/79640074
本文探讨了一个在前端开发中遇到的有趣问题：当在子块级标签内设置margin-top属性时，为何不是子元素而是父容器整体发生了移动。通过实验对比，作者发现使用padding-top属性则能实现预期效果。

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

    这段时间在学习前端技术,在学习css的时候,遇到了很奇怪的问题,在子块级标签里面设置margin-top属性,但是显示的效果却并不是子块级标签向下移动,而是整个父容器相对于整个浏览器向下移动了.呀呀呀~我尝试了在其他浏览器上运行,效果还会一样,很奇怪,我又尝试在父块级标签设置padding-top属性,可以正常显示了,但是我还是不太清楚为什么设置margin-top会有问题,各位看官能否为我解释一下哈~
C语言margin的作用是,css中margin是什么意思，margin作用是什么
weixin_33614878的博客
05-16 1447
一、简介，甚么含义？margin为对象外边距间隔属性。假如对一个对象比方div配置了边框后，再设置margin就会察看到这个div外面孕育发生了间距边距。margin感导：设置对象与此外对象的外边距离，外边隔绝距离。比喻对象与对象，凹凸DIV，摆布DIV隔断几多，大要使用margin完成。.css5{margin:10px}设置html中class=css5对象的外边距(包括上、左、下、右)分别为...
CSS 学习之正确看待 CSS 世界里的 margin 合并
青颜的天空的博客
01-03 1391
块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距，这样的现象称为“margin 合并从此定义上，我们可以捕获两点重要的信息。块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。只发生在垂直方向，需要注意的是，这种说法在不考虑 writing-mode 的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流 是水平流，因此发生 margin 合并的就是垂直方向。
CSS子元素设置margin-top作用于父容器？
weixin_34061042的博客
07-07 173
CSS子元素设置margin-top作用于父容器？ 原因： In this specification, the expressioncollapsing marginsmeans that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two ...
margin标签
qq_20037049的博客
09-11 900
margin是盒模型几个属性中一个非常特殊的属性：只有margin不显示当前元素背景；只有margin可以设置为负值；margin和宽高支持auto;margin具有非常奇怪的重叠特性。
设置margin-top影响到父容器 / 子DIV设置margin-top影响父DIV位置
lingdian1614114082的博客
01-16 978
父级并没有完全保住子集，父级没有包含子集的margin-top部分， 原因：CSS2.1的盒模型中规定： In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance s...
html5中margin是什么意思,html中topmargin属性
weixin_39875167的博客
06-22 1827
html标签中的leftmargin是什么属性？而topma左边距。js获取css属性，更改margin-top属性，给每个a标签 为负数就是向反方向移动。 比如 这两个div中间应该空5px，因为左边的div在右边留有5px的边距。 如果改成 意思就是这两个div不仅中间没空，而且还有3px的部分是重叠在一起的。 自己写几个div试验下就知道了。span标签设置margin-top没有效果呢？是...
div标签中的元素margin-top失效的解决方法
09-28
然而，在某些情况下，即使正确应用了margin-top属性，页面上的元素似乎也没有按照预期产生顶部外边距，这种情况常见于元素的父级是一个div标签，且父级div已经设置了具体的width（宽度）和height（高度）属性。...
前端面经-CSS篇(五）---布局（1）正常布局（Normal Flow）、display属性、flex布局
最新发布
qq_44643806的博客
04-07 1098
正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示出现在另一个元素下面的元素被描述为元素，出现在另一个元素旁边被描述为二、display属性display决定了元素在布局流中的，比如它是像段落、块级容器那样独占一行，还是像文字一样内联排布，或者干脆不显示。：一个块级元素会在其前后自动生成换行（与其兄弟块分行），默认情况下它不会与其他元素并排；：能够设置widthheightmarginpadding。
CSS布局奇淫技巧之--各种居中总结
09-24
设置单行文本的`line-height`等于其父容器的高度，可实现垂直居中。这种方法仅适用于单行文本。 4. **表格的居中** 表格中的`td`和`th`元素可以使用`align="center"`和`valign="middle"`实现内容的水平和垂直...
CSS基础知识day8 box-sizing、resize、box-shadow、opacity、背景属性、border-radius、渐变、字体图标、2D、3D变换、过渡、动画、伸缩盒模型、BFC
2301_77358195的博客
11-11 533
CSS3在未来会按照。
复制链接到剪切板上
05-30
zeroclipboard
微信打开链接提示浏览器打开
03-25
本代码主要适合应用在网站，如果在微信中点击网站链接会提示在浏览器打开，点击“在浏览器打开”后，会直接在浏览打开，直接上效果，大家可以测试，适合自己再下载zhibo.evilba.com
1子级div margin属性影响父级div margin属性
365Marathon
02-17 1019
先来看看如下代码： 为什么子footer_top的margin-top属性错误呢? #footer{width:1314px;height:432px;background-color:#666666;} #footer_top{width:1200px;height:328px;margin-top:24px;margin-left:32px;background-color:#06
关于内层标签margin-top无效的问题
HIDPROVIDER的博客
07-02 807
最近在页面布局的时候遇到了这么一个问题： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> header{ width: 940px; height: 80px; background-color: #000;
批量下载网页上ts视频文件(撸sir!你还在为下载小电影而苦恼吗？)
一歪风的博客
04-05 7万+
1,打开视频网址，按F12打开控制台,点击Network或网络选项，输入ts,取消沟选Hide data URLs 2,将播放的视频进度条拖到最后面，在在控制台中点击最后一个url,复制地址。 3，解析地址 打开分享的文件里面，找到那个该死的HTML（写了我30分钟！！！） 4,打开分享的下载器（你有更好的就用你的，我是开不起VIP才早的免费软件）, 5，打开分享的视频合并器（还是那个原...
iOS死灰复燃SDK
撸大师的博客
06-15 4万+
iOS死灰复燃SDK功能： 令iOS APP进入后台或手机锁屏下常也能常驻后台活动、定位，即使杀死APP进程也会适时自动复活APP，让APP能够在后台或进程被杀死之后也能照常发送网络请求、定位、更新数据等操作，具备自动复活功能！ SDK版本：V2.0 作用：主要用于安防、定位监控，让APP在后台或者进程被杀死的情况下依然能发送网络请求、定位、上传下载、更新数据等操作 3行代码接入SDK非常...
PotPlayer中文绿色版下载地址
gztrljh
08-27 5710
https://potplayer.org/
撸大师SDK V1.0 iOSAPP永久后台运行
热门推荐
撸大师的博客
10-21 86万+
今天2019年1月已经更新了SDK，新的SDK修复已知问题，并包括常驻后台运行和杀死进程后自动复活的功能，请到这里下载 https://blog.youkuaiyun.com/wuhengsi620/article/details/73297300   撸大师SDK V1.0 功能：        突破苹果限制，令iOS APP进入后台或锁屏的情况下仍然能永久后台运行（事务、代码），从而让APP能够实...
第一次失效_爱搞机官方出品！永不失效的看片神器，第一次使用就爱上了
weixin_39883079的博客
01-12 1万+
大噶好，我系波老师。今天必须推荐这款神器！在往期的推送中，关于看片神器总是担心会被和谐，今天这款神器光听名字就感觉很霸气，甚至永久也不会被封杀。它不仅满足我们看直播的需求，而且还没有任何广告。China TV「China TV」是一款多语种视频App，面向国际传播中国文化的移动视频媒体平台。覆盖频道：央视、卫视、地方、综艺、电影、电视剧、体育、新闻等频道。支持平台：iOS、Android...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值