关于两个div，一个父div，一个子div，设置子div的margin会带动父div margin——解决办法

最新推荐文章于 2023-06-11 12:37:45 发布
最新推荐文章于 2023-06-11 12:37:45 发布
阅读量945 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39213643/article/details/90339086
版权

出现的问题

初衷是想让子div  距离父 div 上边距50px，但是和效果不一样

解决办法：

1、父div添加border

2、父div添加padding-top

3.父div添加 overflow：hidden

第一个子标签的margin-top如何不影响父元素
ttttqqqqq的博客
07-09 922
解决margin-top bug 的方法 父元素为块级元素 块级标签：父级的padding-top属性 块级标签：给父元素第一行添加文本 块级标签：给父元素的开头添加伪元素 块级元素：父元素overflow：hidden属性 父元素为行内块元素 单纯的一个元素 并排的行内块标签中的元素 行内块标签：vertical-align属性+margin属性 行内块标签：vertical-align属性（负值？） 为什么不提行内标签？
html怎么设置在一个div的右侧,关于html：如何将另一个div中的2个div对齐到底部和左侧/右侧...
weixin_35618539的博客
05-30 2180
我有这个代码HTMLCSS.head {height:110px;position:relative;}.menu {float:left;position:absolute;bottom:0px;}.search {float:right;position:absolute;bottom:0px;}我想做的是将div"menu"放在div"head"的左下方，将div"search"放在div"...
JavaScript设置Div的margin参数
09-13
JavaScript设置Div的margin参数
设置div元素以及其子元素文本的边距
mclt2017的博客
08-05 1429
如果设置水平居中的话，可以用 text-align 文字需要缩进的话 (即前面加一些空格），可以使用 text-indent 设置div之间外边距 margin 设置div的内边距 padding ...
子div的margin影响父div
热爱web前端开发
01-06 617
今天写div的时候，碰到了这个问题，当给子div加了margin以后，父div会莫名其妙的增加对于的margin。解决办法：给父div添加overflow:hidden。或者让子div浮动起来。都可以解决
关于div嵌套margin-top影响父div的解决办法及各种情况测试
qq_31936457的博客
11-21 1214
div嵌套时 margin-top的解决办法及各种情况测试
div style常用属性介绍及使用示例
01-19
一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： 复制代码代码如下: <div xss=removed> </div> 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 复制代码代码如下: <div...
关于DIV margin-top失效的解决办法
web开发技术
07-26 1364
用DIV+CSS布局网页内容时，常常会遇到一个问题：就是当前DIV样式设置了上边界缩进margin-top属性，但是显示出来的效果却是没有缩进。这种情况出现在前面放置的DIV设置了浮动属性， 后跟着的Div的上边界缩进就不能正常显示。下面我们分析两种情况，代码如下： <div style="width:500px; float:left; height:300px; margin:5px">此处显示新 Div 标签的内容</div> <div style="wi
两个div在同一行显示 调整两个div间的高度 栅格系统col-sm md lg
不如诗啊的博客
01-17 4972
尤其在写一些新增修改页面的时候，不好好排版的话，看起来很不美观。 博主原本的代码 div class="form-group"> for="code">编号 "text" class="form-control" placeholder="不好看" maxlength="5" id="a"> div> div class="form-group"> for="c
给第一个子元素加margin-top，父元素会向下移动的解决办法
以休伯利安的名义
01-19 883
4种方案方法一：给父元素加overflow:hidden方法二：给父元素加border:1px solid transparent方法三：父元素或子元素浮动方法四：父元素加padding-top:1px写在最后 给第一个子元素设置margin-top上外边距时，父元素总会跟着向下移动。 <div id="parent"> <div id="son"></div> </div> <style> body{ margin
子DIV块中设置margin-top时影响父DIV块位置（子div的paddingtop溢出父div）
字符串距离问题动态规划
09-25 363
  这个问题的原因就是父子太亲，挨得太近，父亲和儿子div用了同一个top，所以就解除了父亲对于儿子的上边的限制；所以解决方法也很简单，直接让父亲主动给儿子一个padding-top，使他们顶部分离。常用的解决方法如下： 让父级具有“包裹性” 将父级over-flow设为hidden 将父级display设为inline-block 将父级float或absolute 改变父级的结构 给父元素设置padding （设置子div居中的时候特好用） 给父元素设置透明borde ...
JS 变量居中 margin的应用
最新发布
weixin_50784508的博客
06-11 157
【代码】JS 变量居中 margin的应用。
同级元素和父子间元素margin重叠问题和解决方案
CaseyWei
09-17 2455
场景一：两个同级元素上边元素的margin-bottom和下边元素margin-top会产生重叠。 如下边html，id为one的div和id为two的div之间距离应该是50px，但真实效果是40px，因为margin重叠了，margin值取他们之间的最大值。 <html> <head> <style type="text/css"> ...
JavaScript-页面布局-div布局-盒子模型
插件开发
03-27 4248
文章目录1.盒子模型2.定位方式3.排列属性-float和clear4.块和内联属性5.作者答疑   在使用Html构建界面时，最关键的标签是div，这是一个有着各种属性的块状标签，能够以绝对定位和相对定位的方式构建各种界面模型。 1.盒子模型   div标签在界面排版时，使用的是盒子模型，如下图所示，主要有3大属性来标识相对关系，padding标识内部内容距离border的距离，border边框的宽度，margin是border距离外部元素的距离。使用这三大距离，可以有效控制该元素与周边元素的相对距离。如
两个嵌套的Div,内部Div的margin-top失效
雾里看花叹朦胧
12-26 4963
对内部的div设置margin-top时，内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值。实例如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {
js margin作用到父元素_JS margin边距
weixin_39599081的博客
12-30 1742
1margin属性设置元素的外边距。该属性可使用1到4个值：如果规定一个值，比如div{margin:50px}-所有的外边距都是50px如果规定两个值，比如div{margin:50px10px}-上下外边距是50px，左右外边距是10px。如果规定三个值，比如div{margin:50px10px20px}-上外边距是50px，而左右外边距是10px，下外边距是20...
父DIV padding和子DIV margin
guojialing00的专栏
01-18 1183
在我们使用DIV创建布局的过程中，有可能遇到这种情况： 在父DIV中有一个子DIV，当我们想保持父DIV和子DIV之间保持一定距离的时候，是应该用父DIV的padding属性还是用子DIV的margin属性呢？ 答案是使用子DIV的margin属性，因为padding的应用场景主要是用于控制DIV内文字与DIV的距离，如果是涉及到布局的话，一般使用子DIV的margin属性。
解决子div设置margin-top使父div也跟着向下移动的问题
weixin_43176337的博客
09-29 835
直接看代码 html： <div class="main"> <div class="content"></div> </div> css body{ margin:0; padding:0; } .main{ wid...
margin 属性对嵌套div定位的总结
weixin_42630877的博客
08-09 1009
如果div设置了margin-top属性，他会对嵌套div的margin-top属性有影响，默认执行margin-top属性值最大并会影响最外层margin-top的定位；     一号箭头，margin-top属性值设置为了0px 三号箭头的margin-top属性值设置了200px 正常情况下外层橘黄色背景会钉在浏览器的头部，然而实现的效果去不是这样，确实向下移了20px，说明受到了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值