父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. Log4net入门（控制台篇）

    Log4net是Apache公司的log4j™的.NET版本,用于帮助.NET开发人员将日志信息输出到各种不同的输出源(Appender),常见的输出源包括控制台.日志文件和数据库等.本篇主要讨论如何 ...

  2. 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight

    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...

  3. MFC&Halcon之实时视频监控

    上一篇实现了在MFC的窗体内显示图片,本篇介绍如何在MFC窗体内实时显示摄像头的影像. 要实现的功能是点击一个“开始”按钮,可以显示影像,再点击“停止”按钮,可以停止显示. 因为实时显示影像需要在一个 ...

  4. asp.net webform 自定义分页控件

    做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...

  5. 实现对gridview删除行时弹出确认对话框的一种简单方法

    在VS2008提供的GridView中我们可以直接添加一个CommandField删除列:<asp:CommandField ShowDeleteButton="True" ...

  6. StringBuilder的使用

    今天用到了StringBuilder来拼接查询语句,发现这个真好用,决定做个小结. 百度一个StringBuilder的定义:String 对象是不可改变的.每次使用 System.String 类中 ...

  7. 【微信开发】公众号后台设置错误导致的微信redirect_uri参数错误【图】

    在微信开发中,如微信网页授权登录,分享到朋友圈自定义内容,微信h5支付时 可能会遇到微信redirect_uri参数错误的情况. 此时除了检查自己代码正确性外,还要检查一下是否正确地设置了公众号后台的 ...

  8. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  9. C#计算代码行数

    class Program { static void Main(string[] args) { int totalLineCount = 0; string directory; if(args. ...

  10. .Container与.container_fluid区别

    .Container与.container_fluid是bootstrap中的两种不同类型的外层容器,两者的区别是:.container 类用于固定宽度并支持响应式布局的容器..container-f ...