在子元素设置margin-top,有时会带着父元素一起移动。

原因:

  Outer Div [margin: 0 auto]

  Inner Div [margin-top: 10px]

  根据CSS2.1盒模型规范,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期。但是当Inner Div设置了“margin-top:10px”之后,它的父元素Outer Div也被撑出来一个本不该有的“margin-top:10px”效果。

  CSS2.1的盒模型中的规定:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。

  “嵌套”的盒元素也算“毗邻”,也会导致公用border。

知道原因了,解决办法有三种:

  1,若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden;

  2,Outer Div 加上 padding/border

  3,Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。

  我采用第二个办法,只要让两个div之间有空隙就可以了。那么在父div设置padding:0.5px;即可

子元素应该margin-top影响父元素的解决办法的更多相关文章

  1. 子元素margin-top为何会影响父元素?

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

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

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

  3. 子元素的margin-top会影响父元素

    ---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...

  4. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

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

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

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

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

  7. margin-top影响父元素定位

    写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...

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

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

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

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

  10. 给HTML页面指定元素添加属性,添加父元素

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

随机推荐

  1. ubuntu 部署的mysql无法远程链接

    允许远程用户登录访问mysql的方法 从任何主机上使用root用户,密码:youpassword(你的root密码)连接到mysql服务器: # mysql -u root -proot mysql& ...

  2. BioNLP概述

    BioNLP概述 工具: GENIA Tagger:GENIA Tagger是一个主要应用于生物医学文本领域的词性标注和浅层语法分析工具,GENIA Tagger在GENIA语料上的词性标记性能F-s ...

  3. linux新增用户和删除用户

    新增用户 新增用户命令:useradd 参数: 参数 说明 -u 指定UID,也就是自定义UID -g 知道GID,也就是初始化用户组,/etc/passwd文件中的第四个字段. -G 后面接用户组的 ...

  4. matlab之sub2ind()函数

    将下标转换为线性索引 语法 linearInd = sub2ind(matrixSize, rowSub, colSub) 说明 linearInd = sub2ind(matrixSize, row ...

  5. python glances来监控linux服务器CPU 内存 IO使用

    什么是 Glances? Glances 是一个由 Python 编写,使用 psutil 库来从系统抓取信息的基于 curses 开发的跨平台命令行系统监视工具. 通过 Glances,我们可以监视 ...

  6. Selenium-浮层的操作

    实现-百度登录浮层-输入登录用户名 #! /usr/bin/env python #coding=utf-8 ''' 百度首页-登录浮层 ''' from selenium import webdri ...

  7. JavaUtil_06_HttpUtil_使用httpclient实现

    一.简介 使用 appache 的 httpclient 来实现的 二.源码 package com.ray.weixin.gz.util; import java.io.File; import j ...

  8. Git_学习_00_资源帖

    1.廖雪峰: (1)Git教程 2.阮一峰: (1)Git分支管理策略 (2)Git远程操作详解 (3)Git 使用规范流程 (4)Github 的清点对象算法 (5)常用 Git 命令清单 (6)G ...

  9. javascript笔记(二)

    concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; ...

  10. codeforces 633B B. A Trivial Problem(数论)

    B. A Trivial Problem time limit per test 2 seconds memory limit per test 256 megabytes input standar ...