父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. ubuntu 14.04LTS 环境下配置NFS服务

    简言之,NFS(Network FileSystem,网络文件系统)用于在不同机器,不同操作系统之间通过网络互相分享各自的文件.NFS设计之初就是为了在不同的系统间使用,所以它的通讯协议设计与主机及操 ...

  2. C# 复制PDF页面到另一个PDF文档

    C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...

  3. AFNetworking 3.0 源码解读（四）之 AFURLResponseSerialization

    本篇是AFNetworking 3.0 源码解读的第四篇了. AFNetworking 3.0 源码解读(一)之 AFNetworkReachabilityManager AFNetworking 3 ...

  4. 【NLP】揭秘马尔可夫模型神秘面纱系列文章（四）

    维特比算法解决隐马尔可夫模型解码问题(中文句法标注) 作者:白宁超 2016年7月12日14:08:28 摘要:最早接触马尔可夫模型的定义源于吴军先生<数学之美>一书,起初觉得深奥难懂且无 ...

  5. jquery dataTable汉化（插件形式）

    1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...

  6. C#开发微信门户及应用(21)-微信企业号的消息和事件的接收处理及解密

    在上篇随笔<C#开发微信门户及应用(19)-微信企业号的消息发送(文本.图片.文件.语音.视频.图文消息等)>介绍了有关企业号的消息发送,官方特别声明消息是不用加密发送的.但是在回调的服务 ...

  7. python 数据类型---列表使用 之二 （增删改查）

    列表的操作 1.列表的修改 >>> name ['Frank', 'Lee', 2, ['Andy', 'Troy']] >>> name[0] = "F ...

  8. apache中怎么配置网站的默认首页

    配置方法如下:1.首先需要打开Apache的配置文件httpd.conf文件,使用一般的编辑器或者记事本打开均可.2.找到或者搜索到如下字段:<IfModule dir_module> D ...

  9. Yii 2.x RESTful 应用 - 类图

    配置url管理器配置请求数据解析器配置用户控制器 ['GET', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS']

  10. CentOS系统配置 iptables防火墙

    阿里云CentOS系统配置iptables防火墙   虽说阿里云推出了云盾服务,但是自己再加一层防火墙总归是更安全些,下面是我在阿里云vps上配置防火墙的过程,目前只配置INPUT.OUTPUT和FO ...