解决 margin-top 影响父元素的办法

最新推荐文章于 2022-06-08 19:58:35 发布
最新推荐文章于 2022-06-08 19:58:35 发布
阅读量575 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45956258/article/details/103359333
版权

如下四种方法
1、父元素设置 overflow:hidden;
2、父元素设置 padding-top:1px;
3、父元素设置 border-top:1px solid transparent;
4、父元素或子元素设置浮动 float:left; 或者绝对定位 position:absolute;

无止境学
关注
专栏目录
给第一个子元素加margin-top，父元素会向下移动的解决办法
以休伯利安的名义
01-19 839
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导致父元素移动的问题
前端队长Daotin
01-26 443
问题描述 今天在修改页面样式的时候，遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔，而是作用在了其父元素上，导致父元素产生了一个margin-top 的效果。 今天就来说说整个问题产生的原因，以及解决方案。 问题分析 在MDN上面有这么一段文字： 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值，这种行为称为边距折叠。 注意：只有上下边距会产生折叠，左右边距不会产生折叠。 有三种情况会产生边
关于margin-top作用到父元素上的问题
farmerXU的博客
08-05 438
css中第一个子元素节点的margin-top会作用到父元素上，加了 文字（文字属于文本节点）div就不是第一个子元素节点了或者给父元素加overflow。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> &lt...
margin传递，子元素的上下margin会传递给父级
weixin_34004750的博客
02-28 151
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #box{ background:red;} 8 #div{width:200px;hei...
margin击穿问题（子元素的margin值作用在父元素上）
fenghui187的博客
12-26 3353
前端开发师在开发过程中经常会遇到这种问题，有时候明明设置的是子元素的margin值，结果最后却作用在了父元素上，就像下面这个简单的代码：                     margin击穿                  .parent{           width:200px;           height:200px;           back
子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为什么会影响父元素？
苏苏就是小苏苏的博客
02-18 3157
1.两个元素，当你为子元素设置margin-top的时候，你会发现什么呢？ 2.解决方法 父元素设置 1- overflow: hidden 2- display: inline-block;或者float布局 3- border: 1px solid transparent; 4- position: absolute
css中子元素设置margin-top为什么影响了父元素
12-11
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
父元素与子元素之间的margin-top问题(css hack)
01-19
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: ”box1″> ”box2″>...
div标签中的元素margin-top失效的解决方法
09-28
针对此问题，一个常见的解决办法是给父元素设置overflow属性为hidden。这样做可以创建一个新的块格式化上下文，强制父元素把子元素的外边距当做一个整体来处理。通过将overflow设置为hidden，父元素对子元素的外边距...
子元素设置margin-top，父元素也受影响
沫沫酱
12-09 2万+
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         m
子元素margin-top为何会影响父元素？
热门推荐
Hey firefly
10-28 2万+
问题如下 一段很简单的代码：css如下：<style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: 100p
如何消除margin-top对父元素的影响
Efficiency9的博客
05-23 1567
有时我们会在css中遇到这种情况： 当我们给子元素设置了margin-top值之后，不仅子元素没有发生变化，父元素却发生了变化（外边距合并） 解决方案一： 给子元素加上float：left 解决方案二： 为父元素添加border属性(值不能为0) 解决方案三： 为父元素添加padding（值不能为0）
设置margin-top值时，溢出到父元素
baifu2766的博客
08-12 544
给子元素margin-top时，若这个子元素前面没有其他内容，这个margin-top值会应用到父元素上 解决方案，给父元素设置：before body:before{ content: ""; display: table; /*或者display: inline-block;*/ } 转载于:https://www.cn...
css中子元素margin影响父元素的解决方法
limi58的专栏
08-07 994
在css中，若父元素和子元素均是relative的定位，子元素margin-top之后，父元素也会跟着一起动，解决方法是：父元素overflow为hidden即可
解决margin-top 使父元素掉落问题
TXW6666的博客
07-12 408
在写网页的过程中经常会遇到一些问题，往往都是些很小的问题 但是却会使页面的整个布局都崩溃。 特别是在使用浮动和绝对定位的时候。浮动带来的高度塌陷，以及绝对定位元素达不到预期的效果。 所以在写页面的过程中最好是写一点看一下效果 下面我们看看一些常见的布局问题 1.父元素里有块元素，如果给子元素添加margin-top，父元素会下来。 .wrapper{ height: 60px; background-color: palevioletred; } .box1{
margin-top并不是作用于父类
前端啥也不懂
05-12 690
margin-top并不是作用于父类，而是父类产生了margin-top的效果。这个是CSS规范化的结果，在1999规范以前，所有元素都是默认有border的，或者说，即使border宽度为0，仍然可作定位使用。 现在的规范中，将对margin定义更明确化(外边距：与当前盒模型以外的最近一个盒模型的间距)，如果直接的父级盒模型在当前方向上没有border，就认为父级的范围也属于子标签的边框的一部...
关于margin-top会撑开父元素的解决办法
chouwu1114的博客
12-02 2352
父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 解决方法： 1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 2、为父元...
子元素的margin-top为什么会影响父元素
apeiziwei的博客
06-08 1565
子元素的margin-top影响父元素的原因及解决方案
css中给子元素添加margin-top影响到父元素
最新发布
09-01
在CSS中，给子元素添加margin-top会直接影响到父元素。 当给子元素添加margin-top时，子元素会相对于它的父元素进行定位。如果子元素的margin-top值为正数，那么子元素就会向上移动，同时父元素的高度也会增加，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值