margin 属性对嵌套div定位的总结

最新推荐文章于 2024-04-15 19:17:28 发布
最新推荐文章于 2024-04-15 19:17:28 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42630877/article/details/81536482
本文探讨了当内部div设置margin-top属性时对外部div定位产生的影响。通过实例展示，即使外部div设置了margin-top为0px，仍然会受到内部div中200px margin-top的影响，导致整体布局下移。

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

如果div设置了margin-top属性，他会对嵌套div的margin-top属性有影响，默认执行margin-top属性值最大并会影响最外层margin-top的定位；

 

 

一号箭头，margin-top属性值设置为了0px 三号箭头的margin-top属性值设置了200px 正常情况下外层橘黄色背景会钉在浏览器的头部，然而实现的效果去不是这样，确实向下移了20px，说明受到了内层margin-top的影响。

 

嵌套div里子元素div使用margin可能遇到的问题
r67686的博客
09-16 645
在使用嵌套div时，如果子元素设置了margin的属性，有时会使父元素一起移动，例如 可以看到两个div一起向下移动了，并没有达到子div在父div里面向下移动 50px的效果，要解决这种情况，可以给父元素增加一个边框的属性 比如 可以看到效果出来了 还可以给父元素的样式代码里设置一个overflow:hidden，一样可以解决这个问题 也可以给父元素设置一个有效的padding （这里的有效指的是要给一个padding值，不能设置为none和hidde...
div样式之margin
weixin_45637488的博客
04-03 2257
<!-- 外边距(margin):盒子之间的距离--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
前端嵌套div的margin不起作用怎么解决
yunduanaoligei的博客
10-09 633
今天分享下”前端嵌套div的margin不起作用怎么解决“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 顺便科普下margin的定义和用法。 div嵌套的HTML代码： ​​​​ ​​<​​​​html​​ ​​lang​​​​=​​​​"en"​​​​>​​ ​​<​​​​head​​​​>​​ ​​<​​​​meta​​ ​​charset​​​​=​​​​"UTF-8"​​​​&
html div居中属性,让div水平居中设置margin属性
weixin_39968724的博客
06-04 956
css怎样让div水准居中呢？div居中前提是甚么？怎样才让div居中呢？要让div程度居中设置装备摆设margin属性即可。1、居中枢纽CSS代码：margin:0 automargin:0 auto为何能让div 居中批注：margin:0 auto拆分为margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;枢纽marg...
嵌套div（块级元素）的静态定位
alucardxpmusic的专栏
10-11 814
div1      div2      div3      div4
HTML中div嵌套div的margin不起作用的解决方法
11-19
下面介绍一下div嵌套div时margin不起作用的解决方案。 顺便科普下margin的定义和用法。 div嵌套的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
DIV多层嵌套margin-top的BUG问题
09-25
本文主要探讨一个常见的前端开发问题，即“DIV多层嵌套margin-top的BUG问题”。在某些浏览器，特别是Firefox和Internet Explorer的不同版本中，这个问题可能导致预期的样式效果出现偏差。 问题起源于浏览器对于CSS...
div style常用属性介绍及使用示例
01-19
一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： 复制代码代码如下: <div xss=removed> </div> 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 复制代码代码如下: <div...
CSS排版DIV的“margin”属性常见布局技巧垂直居中对齐，左上角，左下角，右下角，右上角对齐方式的实现
飙歌的博客
10-24 1万+
margin的值类型有：auto | length | percentage percentage：百分比是由被应用box的containing block margin的默认值为0，并且margin支持负值。 margin可以用来同时指定box的四边外边距。如果属性margin有四个值，那么值将按照上-右-下-左的顺序作用于四边，按顺时针的顺序围绕元素。 表达式如下： margin：top right bottom left； 四个数值中间以空格分隔。效果等同于： margin...
利用margin属性将一个div水平居中
09-25
将一个div水平居中的方法有很多，不过在使用过程中margin的频率还是比较高的，下面有个不错的示例，不知道的朋友可以参考下
Div多层嵌套margin-top的bug问题及解决方案
dream_start_at_2017的博客
10-18 659
bug: 如果父元素和第一个子元素没有float的情况下，给第一个子元素添加margin-top属性会错误的传递给父元素，出现父元素与子元素一起向下移动的问题。 eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-top-bug问题及解决方案</title> <style> *{ margi
写前端时margin常遇到的嵌套崩塌问题
m0_52242001的博客
06-01 328
本文提供了margin遇到的问题（父元素随这子元素向下移动的问题）和两种解决办法帮助需要的人们，大家一起交流学习。
css 父子嵌套关系margin合并问题解决方案
Rance_King的博客
09-19 1077
在css中，父子嵌套的元素会发生子元素margin失效的问题。比如： <style> .parent{ width: 100px; height: 100px; background-color: red; margin-top: 100px; } ...
子div的margin属性影响到父div的定位
readonlyfile
10-26 1608
如下形式： .wrap{ margin: 0 auto ; background:#ccc ; } .child{ margin-top : 20px ; } 该div将影响父层div的margin属性 最后的结果是，child div 会使得 wrap div margin-top 20 px。 网上搜了下，解决办法是：在wrap中添加ove
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 5064
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
【html】盒模型div，边框border，内边距padding，外边距margin
m0_50947589的博客
04-13 9380
#初识盒模型@TOC 要想学习盒模型，首先要知道什么是盒模型。顾名思义，每个div标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。 ##盒模型的组成@TOC 盒模型包括：content（内容）、border（边框）、padding（内边距）以及margin（外边距）。 content（内容）：显现图像和文本内容。 border（边框）：指围绕在盒模型外侧的一条样式自定义的线。 padding（内边距）：指元素内容与边框之间的间距。 margin（外边距）：指围绕在边框之外的
5分钟深入了解margin属性
热门推荐
qq_44158936的博客
03-21 2万+
1、定义与用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 **说明：**这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 **注释：**允许使用负值。 2、属...
CSS基础：margin属性4种值类型，4个写法规则详解
最新发布
u013179804的博客
04-15 1万+
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集268篇原创内容-gz.h后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中。
div 相对位置和绝对位置
每天进步一点点
02-16 2801
无标题文档 多谈谈你的看法，或许会让更多人关注你
解决HTML嵌套div中margin失效问题及IE特性解释
在示例代码中，通过给`overflow`设置为`hidden`，我们可以看到外层`div`的`margin`开始生效，因为它创建了一个新的BFC，避免了`padding`对`margin`的影响。 理解并应用这些原理可以帮助开发者在处理复杂的HTML布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值