父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. ITTC数据挖掘平台介绍（七）强化的数据库， 虚拟化，脚本编辑器

    一. 前言 好久没有更新博客了,最近一直在忙着找工作,目前差不多尘埃落定.特别期待而且准备的都很少能成功,反而是没怎么在意的最终反而能拿到,真是神一样的人生. 言归正传,一直以来,数据挖掘系统的数据类 ...

  2. OCP考点实战演练02-日常维护篇

    本系列宗旨:真正掌握OCP考试中所考察的技能,坚决不做Paper OCP! 实验环境:RHEL 6.4 + Oracle 11.2.0.4 OCP考点实战演练02-日常维护篇 1.数据库体系结构和AS ...

  3. php后台增删改跳转

    php登录页面: <h1>登录界面</h1> <form action="dengluchuli.php" method="post&quo ...

  4. Windows Programming ---- Beginning Visual C#

    span.kw { color: #007020; font-weight: bold; } code > span.dt { color: #902000; } code > span. ...

  5. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  6. 解决Bash On Ubuntu On Window安装Zsh无效问题附安装说明

    前言 Zsh是一款非常棒的Shell,使用Linux和Mac系统的人,基本上都知道zsh的存在. 问题 在安装完Zsh后,zsh是可以使用的,但是重启之后,又恢复至默认的bash. 我在安装好之后,使 ...

  7. .Net语言 APP开发平台——Smobiler学习日志：如何快速实现地图定位时的地点微调功能

    Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.地点微调代码 VB: Dim ...

  8. shell 带签名请求，yii 处理带签名的请求

    处理请求 class TestController extends Controller { public function init() { if(!YII_ENV_DEV){ throw new ...

  9. tee（打印并保存文件）

     tee从标准设备读取数据,输出到标准输出设备,同时保存成文件-a 附加到既有文件后面,而非覆盖他.例如: pwd |  tee who.out

  10. 【特种兵系列】String中的==和equals()

    1. 小样示例 public static void main(String[] args) { String a = "a" + "b" + 123; Str ...