父div如果没有任何东西，子div设置margin-top，父div会下落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{padding:0;margin:0;background:#999;}

        .page-content{min-height:600px;background:#fff;}

    </style>

</head>

<body>

    <div class="page-content">

        <div style="margin-top:50px;">gfsdghdfd</div>

    </div>

</body>

</html>

aaarticlea/png;base64,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" alt="" />

解决方法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位

子DIV设置margin-top影响父DIV位置的解决办法的更多相关文章

  1. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  2. 子DIV块中设置margin-top时影响父DIV块位置的解决办法？

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  3. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  4. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  5. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  6. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

  7. 同级div设置display:inline-block，父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  8. 子元素margin-top为何会影响父元素？

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  9. 布局时margin会影响父元素

    布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...

  10. 子元素设置margin-top后，父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. python基础操作以及hdfs操作

    目录 前言 基础操作 hdfs操作 总结 一.前言        作为一个全栈工程师,必须要熟练掌握各种语言...HelloWorld.最近就被"逼着"走向了python开发之路, ...

  2. [Android]在Dagger 2中使用RxJava来进行异步注入（翻译）

    以下内容为原创,欢迎转载,转载请注明 来自天天博客: # 在Dagger 2中使用RxJava来进行异步注入 > 原文: 几星期前我写了一篇关于在Dagger 2中使用*Producers*进行 ...

  3. context:component-scan" 的前缀 "context" 未绑定。

    SpElUtilTest.testSpELLiteralExpressiontestSpELLiteralExpression(cn.zr.spring.spel.SpElUtilTest)org.s ...

  4. Unity3d连接SQL Server数据库出现SocketException: 使用了与请求的协议不兼容的地址错误

    这两天,同学问我Unity3d连接SQL Server的问题,当时我只是简单的说:“应该一样吧,就是那简单的几句啊”.之后他让我试了下,我才发现有问题了.故此写下一篇博客,要牢记这件事的教训,操作数据 ...

  5. C#——this关键字（2，3）（含求助贴）

    这次来看一看this关键字的第二个用法:将对象作为参数传递到其他方法 ----------------------------------------------------------------- ...

  6. C#开发微信门户及应用(36)--微信卡劵管理的封装操作

    前面几篇介绍了微信支付方面的内容,本篇继续微信接口的一些其他方面的内容:卡劵管理.卡劵管理是微信接口里面非常复杂的一个部分,里面的接口非常多,我花了不少时间对它进行了封装处理,重构优化等等工作,卡劵在 ...

  7. java.lang.Class.isAssignableFrom()用法解析

    一.概述: 此方法主要用来判断 "参数类" 是否是 "源类" 的子类.接口实现类,或者与 "源类" 相同,在此情况下返回 true; 二.格 ...

  8. 记录一次bug解决过程：velocity中获取url中的参数

    一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...

  9. 【转】gc日志分析工具

    性能测试排查定位问题,分析调优过程中,会遇到要分析gc日志,人肉分析gc日志有时比较困难,相关图形化或命令行工具可以有效地帮助辅助分析. Gc日志参数 通过在tomcat启动脚本中添加相关参数生成gc ...

  10. js判断网页是否加载完毕 包括图片

    <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...