关于子元素margin-top影响父元素位置问题

已于 2023-10-08 14:30:39 修改
阅读量739 收藏 1
点赞数 2
分类专栏： css 文章标签： margin-top 子元素影响父元素
于 2018-01-16 22:35:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39755601/article/details/79079829
版权

之前写项目的时候喜欢用border,所以一直都没有遇到过这个问题,如果父元素没有float属性没有,也没有border属性的时候,子元素的margin-top会影响到父元素,在css2.1中有规定所有毗邻的两个或多个盒元素的margin-top会共享使用,因为嵌套也属于毗邻,所以才会有子元素的margin-top影响了父元素的现象

解决这个问题我知道的有如下方法:

1.给父元素添加一个border

2.给父元素添加float

3.给父元素添加overflow:hidden

4.使用position定位也是可以的,但是我不太喜欢这个方法

5.在父元素与子元素之间添加一个有高度的div

前端-杨兆敏
关注
专栏目录
CSS - 你遇到过子元素设置margin-top，影响父元素的情况吗
xingyu_qie的专栏
04-07 664
例如在一个div盒子元素内，需要设置一个标题，我们用一个p标签做为这个标题元素。根据UI设计要求，标题元素需要距离父div元素20px，理所当然想到的就是为标题元素设置margin-top为20px，希望可以撑开距离顶部的距离。但根据经验可知，这样做是存在问题的，父div元素会紧跟着p元素向下20px，并没有达到撑开20px的效果。先来看一下最初的代码和下图的效果。
CSS中margin-top对父级元素产生作用的问题
谢家老树
10-14 8479
CSS中margin-top对父级元素产生作用的问题在页面重构中，利用margin进行定位非常常见，然而margin-top这个属性经常会给我们带来一定的困扰，有时候不起作用，还把父层“拉”了下来，如图所示： 代码如下：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test2</title
子元素设置margin-top，父元素也受影响
热门推荐
沫沫酱
12-09 2万+
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         m
css中子元素设置margin-top为什么影响了父元素
12-11
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2{ margin-top: 50px; cursor:
子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;...
子元素的margin-top为什么会影响父元素
apeiziwei的博客
06-08 1547
子元素的margin-top影响父元素的原因及解决方案
子元素margin-top导致父元素移动的问题
前端队长Daotin
01-26 436
问题描述 今天在修改页面样式的时候，遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔，而是作用在了其父元素上，导致父元素产生了一个margin-top 的效果。 今天就来说说整个问题产生的原因，以及解决方案。 问题分析 在MDN上面有这么一段文字： 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值，这种行为称为边距折叠。 注意：只有上下边距会产生折叠，左右边距不会产生折叠。 有三种情况会产生边
父元素与子元素之间的margin-top问题(css hack)
01-19
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: ”box1″> ”box2″>...
给第一个子元素加margin-top，父元素会向下移动的解决办法
以休伯利安的名义
01-19 824
4种方案方法一：给父元素加overflow:hidden方法二：给父元素加border:1px solid transparent方法三：父元素或子元素浮动方法四：父元素加padding-top:1px写在最后 给第一个子元素设置margin-top上外边距时，父元素总会跟着向下移动。 <div id="parent"> <div id="son"></div> </div> <style> body{ margin
子元素的margin-top会影响父元素
weixin_39037804的博客
09-02 200
---恢复内容开始--- 之前在写项目的时候，发现原本想让父子元素之间加点边距，却让父元素产生了margin-top，于是百度之后发现了原因。 在css2.1盒模型中 In this specific...
margin-top影响父级元素位置
weixin_45162984的博客
06-01 2259
margin-top影响父级元素位置 子元素的margin-top将父级元素也产生边距,导致这个问题的原因是,父级元素不具有一个完整的包裹性,使子元素不能找到父级元素的border或者padding; css规定 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。. 嵌套也在...
css中子元素设置margin-top会影响到父元素
weixin_40763897的博客
11-12 4061
demo代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content_top{ width: 500p...
margin：子元素添加margin-top影响父元素；上下盒子添加外边距重叠问题
美人如玉，剑气如虹
09-03 7063
这几天看margin看的有点晕，写篇博客细细梳理一下 margin 的一些问题。主要是两个方面的，1. 子元素添加 margin-top 父元素也会下移；2.当兄弟关系的两个盒子同时添加外边距时，相邻的外边距会重叠。 1.子元素添加 margin-top ，父元素也会受影响，也像添加了 margin-top一样下移。 ...
子元素的margin-top为什么会影响父元素？
苏苏就是小苏苏的博客
02-18 3151
1.两个元素，当你为子元素设置margin-top的时候，你会发现什么呢？ 2.解决方法 父元素设置 1- overflow: hidden 2- display: inline-block;或者float布局 3- border: 1px solid transparent; 4- position: absolute
子元素设置margin会影响父元素问题
ice-bear
01-21 2164
原因及解决
子元素margin-top影响父元素
oskey_ykf
09-14 369
问题：     div父包裹div子时，设置div子的margin-top属性会影响div父的margin-top行为。即父子div同时具有了margin-top的属性。 代码：     分析： 这是由w3的规范决定的行为。 根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠 解决方法： 1.
关于子元素的margin-top影响父元素
焕野,唤野
03-05 341
我的第一篇博文，感觉不开个博客不行了，一是记录自己的学习历程，而是可以当做笔记来看，之前让我遇到了一个头疼的问题，现在干脆写出来以免忘了！ 接下来看看这个问题“子元素为什么设置margin会影响父元素的margin” 我加点文字在这里 先把html,body,div的默认margin，padding设为0,。 再给父元素设置宽高，子元素设置宽高。
关于子元素的margin-top影响父元素的问题
SOALIN的博客
11-17 293
css中给子元素添加margin-top影响到父元素
最新发布
09-01
在CSS中，给子元素添加margin-top会直接影响到父元素。 当给子元素添加margin-top时，子元素会相对于它的父元素进行定位。如果子元素的margin-top值为正数，那么子元素就会向上移动，同时父元素的高度也会增加，以便为子元素腾出空间。这种情况下，父元素的高度等于子元素的高度加上子元素的margin-top值。 然而，当给子元素添加margin-top时，子元素的margin-top值为负数时，就会导致父元素相对应上移。子元素会向上移动，但是父元素的高度不会相应增加以适应子元素的移动。这种情况下，父元素的内容会被覆盖，可能会导致布局出现问题。如果没有合适的处理方式，可能需要考虑调整CSS布局或使用其他技术手段来解决问题。 因此，给子元素添加margin-top会直接影响到父元素的位置和高度。我们在设计和布局网页时，需要注意这一点，并确保正确处理子元素的margin-top值，以避免出现布局问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值