在一个<div>元素中嵌套一个子div，同时设置子div的margin-top，结果，父元素和子元素一起下沉，留出来个空白区域。

原因就是：

       一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决方法：

给父元素添加border或border-top。

给父元素添加padding或padding-top。

给父元素设置overflow:hidden.

将margin-top,变为padding-top.

注意margin-top,margin-bottom,padding-top,padding-bottom设置百分比时，百分值是按照父容器的宽设置而不是高度。

writing-mode：vertical-lr;设置为纵向书写时，百分比按照高度设置。

子元素margin-top后，跟父元素一起下沉的更多相关文章

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

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

  2. 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...

  3. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

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

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

  5. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  6. Atitit.判断元素是否显示隐藏在父元素 overflow

    Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop  指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素  $(next) ...

  7. 给HTML页面指定元素添加属性，添加父元素

    给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img   此处用到querySelectorA ...

  8. silverlight子窗体操作数据库后刷新父窗体

    silverlight子窗体操作数据库后刷新父窗体 作者 Kant 写于 2011 年 07 月 02 日 分类目录 学习笔记, 所有文章 C# Silverlight 代码 刷新 学习 异步刷新 数 ...

  9. 子元素margin-top属性传递给父元素的问题 转！

    问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...

  10. css之子元素获取(未定义高度)父元素的高度

    你可能碰到过这样的需求,一个高度不固定的区域(内容由用户创造),当鼠标经过该区域或者其神马操作时,需要出现一个与该区域一样大的模版: 我们用一个span来处理这个mask.由于 .sample-1 和 ...

随机推荐

  1. 转 微软Sysinternals Suite工具13年12月版下载

    Sysinternals Suite 是微软出品的一套集成数十个绿色软件的系统工具包.Sysinternals Suite 和IT之家的魔方电脑大师设计一样,里面的各个小工具组件都可以单独拿出来运行, ...

  2. 【MVC】VS常用技巧

    1,在VS2010中,选中指定的代码段,可以拖拽到工具箱中,形成标签,以后还想书写类似的代码,双击鼠标即可. 2,在VS2012中,可以在注释上标注//TODO:我是注释 这样,注释就会出现在任务列表 ...

  3. juc包下的集合类

    import java.util.Iterator;import java.util.concurrent.CopyOnWriteArrayList; /** * 集合在多线程中同步的方式: * 1. ...

  4. spring initializr 创建项目时，依赖对应的 artifactId

    选择各个依赖时,对应的 artifactId 选择的依赖 artifactId名字 不选择依赖,默认包含的artifactId spring-boot-starter.spring-boot-star ...

  5. shell获取目录下所有文件夹的名称并输出

    获取指定目录/usr/下所有文件夹的名称并输出: shell代码: #!/bin/bash #方法一 dir=$(ls -l /usr/ |awk '/^d/ {print $NF}') for i ...

  6. tyvj1391走廊泼水节

    题目:http://www.joyoi.cn/problem/tyvj-1391 考虑对于每一条边,新加的长度是(左边点数*右边点数-1)*(当前边权+1): 然后要kruskal的思想,把边从小到大 ...

  7. 百度地图JavaScript如何清除指定类型的覆盖物

    由于一个地图中有很多种类型的覆盖物,由于某个覆盖物(一般是自定义)整个地图中只允许出现一次 那第一想到的就是,每次创建这个类型的覆盖物时先清除这一类型的覆盖物,比较简单判断覆盖物的类型 instanc ...

  8. sublime text3安装 mac os汉化/常用模块

    sublime text介绍: Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器.Sublime Text是由 ...

  9. RDD之二：原理

    RDD简介 在集群背后,有一个非常重要的分布式数据架构,即弹性分布式数据集(Resilient Distributed Dataset,RDD).RDD是Spark的最基本抽象,是对分布式内存的抽象使 ...

  10. selenium Java-1 配置

      1.使用intellij新建一个maven项目,名字自定.在pom中写入selenium的依赖.其他依赖也添加到该文件中. [maven selenium依赖](http://mvnreposit ...