子div的margin影响父div

最新推荐文章于 2021-11-24 15:30:40 发布
最新推荐文章于 2021-11-24 15:30:40 发布
阅读量633 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html css 文章标签： div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nishiwei/article/details/6119196
本文介绍了在网页布局中遇到的子元素margin导致父元素margin出现意外增加的现象，并提供了两种解决方案：一是通过设置父元素overflow属性为hidden；二是使子元素浮动。这两种方法都能有效避免margin塌陷的问题。

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

今天写div的时候，碰到了这个问题，当给子div加了margin以后，父div会莫名其妙的增加对于的margin。

 

解决办法：给父div添加overflow:hidden。或者让子div浮动起来。都可以解决

html页面里莫名奇妙的margin解决办法
渔父歌的博客
03-18 1237
在使用flex布局的时候，有一个标签总是有margin怎么都去不掉，多次尝试无果后差点以为浏览器出bug了。 最后发现是我用的UI框架flex和float混用了，最坑的是float布局产生的边距是看不见的，chrome里会显示成margin，但在Firefox上就不会显示任何东西。 找到问题之后要解决就很简单了，如果是自己写的CSS的话去掉float就行了...
CSS常见问题解决001——子div的margin-top影响父div的位置
tongbiaos的博客
08-24 2592
1.错误效果，子元素中的margin-top:10px没有显示出来。   2.正确效果 碰到上面的这种情况，就像父元素加入overflow:hidden。   3.overflow相关用法
子DIV设置margin-top影响父DIV位置
云影杳杳的博客
09-21 803
*{margin: 0;padding: 0;} .pare{width: 600px;height: 600px;background-color: #ccc;} .child{width: 300px;height: 300px;background-color: red;margin: 50px;}        在设置子DIV的margin-t
子div设置margin-top的时候 父的div也会跟着向下移动
Beware beginning
08-23 320
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距 会和其内部文档流中的第一个子元素的上边距重叠 为父div设置border 在父div里面设置了padding-top margin是用于隔开两个独立元素， 而padding用域隔开元素及其元素内部内容。其实子div相当于父div的内容， 为了使元素和内容隔开，可以使用padding ...
子DIV块中设置margin-top时影响父DIV块位置（子div的paddingtop溢出父div）
字符串距离问题动态规划
09-25 369
  这个问题的原因就是父子太亲，挨得太近，父亲和儿子div用了同一个top，所以就解除了父亲对于儿子的上边的限制；所以解决方法也很简单，直接让父亲主动给儿子一个padding-top，使他们顶部分离。常用的解决方法如下： 让父级具有“包裹性” 将父级over-flow设为hidden 将父级display设为inline-block 将父级float或absolute 改变父级的结构 给父元素设置padding （设置子div居中的时候特好用） 给父元素设置透明borde ...
关于两个div，一个父div，一个子div，设置子div的margin会带动父div margin——解决办法
qq_39213643的博客
05-19 954
出现的问题 初衷是想让子div 距离父 div 上边距50px，但是和效果不一样 解决办法： 1、父div添加border 2、父div添加padding-top 3.父div添加 overflow：hidden ...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
在网页布局设计中，我们经常会遇到这样一个问题：当一个元素（如`div`）的宽度设置为`width: 100%`时，如果再添加`padding`或`margin`，元素的总尺寸会超出其父元素的宽度，导致布局混乱。为了解决这一问题，我们...
父div高度不能自适应子div高度的解决方案
10-25
在网页设计中，CSS布局常常会遇到父容器（父div）无法自动适应子元素（子div）高度的问题。这种现象会出现在多种布局场景中，尤其是在子容器高度大于父容器时。当父div没有设置固定高度而其内部的子div由于内容多而...
子级div设置margin影响父级.html
09-24
前端开发中，有时候会遇到设置子级div的margin属性后，导致整个父级div整体移动，有时候却是正常的，时而正常时而异常。
HTML中div嵌套div的margin不起作用的解决方法
11-19
下面介绍一下div嵌套div时margin不起作用的解决方案。 顺便科普下margin的定义和用法。 div嵌套的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
子元素div高度不确定时父div高度如何自适应
09-25
这个容器同样位于子元素div之后，并通过设置极小的高度（如1px）和负边距（如margin-top:-1px）来确保它不会影响到页面的布局。此容器同样设置"clear:both"和"overflow:hidden"，从而达到清除浮动并使父元素div高度...
子级div设置margin属性影响父级位置
sunshine的博客
09-24 1699
前端开发中，有时候会遇到设置子级div的margin属性后，导致整个父级div整体移动，有时候却是正常的，时而正常时而有异常。 一、问题描述： 1、css未设置margin属性时，效果图如下： 没有margin设置 2、css设置 margin-top:50px 属性时，预期效果图如下： 预期效果图 3、css设置 margin-top:50px 属性时，实际效果图如下： ...
HTML里子DIV设置margin-top后影响父DIV位置的解决办法
weixin_44341110的博客
04-17 1456
在HTML里，子DIV元素设置了margin-top后，在与父元素之间没有任何其他元素的情况下，会影响到父DIV的位置。 一、编写代码。 <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div style="width:100%; height:400px;background-color:blue"> <div style="width:80%;he
子DIV块中设置margin-top时影响父DIV块位置的解决办法
a393931948的专栏
10-08 9614
解决办法1: 若子DIV块中使用margin-top,则在父DIV块中添加：overflow:hidden; 解决办法2: 在子DIV块中用padding-top代替margin-top
子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; } &lt;div class="a"&gt;...
解决div下边距莫名多出4px问题
SiShen654的博客
07-12 894
问题：div下边多出4px 主要是div标签内的留空导致的，解决如下： 将父盒子的文字大小设置为0即可 font-size: 0
div内嵌p,div等块元素出现的问题
weixin_30307921的博客
04-13 305
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素，比如p,div，设置外间距（margin）的话会怎样。本来还纳闷div莫名奇妙的怎么多出了一些外边距，甚至设置margin为0，都不能解决问题。到底是怎么回事呢？ 1、 1 <!DOCTYPE html> 2 <html>...
javaWeb 学习笔记 莫名多出来的div标签
weixin_43437100的博客
11-24 893
在使用jQuery的基本过滤选择器时，出现了一些问题 代码主要功能，点击按钮 使得相应的标签块颜色变化，表示选中。 期望：通过div:last来选择最后一个div标签并改变颜色。 //2.选择最后一个 div 元素 $("#btn2").click(function(){ //无法实现期望功能的语句 $('div:last').css("background", "#bbffaa"); }); 在使用时没有办法如期找到我们需要的最后一个div 如代码所示最后
让子div在父元素中居中展示
最新发布
05-21
### 使用 CSS 让子 `div` 在父 `div` 中水平垂直居中 实现子 `div` 在父 `div` 中水平垂直居中有多种方法，以下是几种常见的方案及其适用场景： #### 方法一：Flexbox 布局 通过 Flexbox 可以轻松实现子元素在父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值