margin-top 为什么会影响父元素的 margin-top
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分隔。
2.解决方法:
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位
margin-top 为什么会影响父元素的 margin-top的更多相关文章
- 布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...
- 子元素margin-top为何会影响父元素?
子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...
- CSSmargin击穿问题(子元素margin-top会影响父元素)
最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container& ...
- css子元素的margin-top为何会影响父元素
详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
- (转)MarginTop 为何影响父元素的 MarginTop
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...
- 子元素应该margin-top为何会影响父元素【转】
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...
- MarginTop 为何影响父元素的 MarginTop(转)
add by zhj: 没找到原文 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心 ...
- 子元素应该margin-top影响父元素的解决办法
在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒 ...
- 子元素的margin-top会影响父元素
---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...
随机推荐
- BT中的磁力链接(转)
注意:磁力链接不是迅雷的,而是BT网络中的一种协议. 磁力链接与种子文件 磁力链接并不是一个新概念,早在2002年,相关的标准草稿就已经制定了.但直到2012年海盗湾为规避版权问题删除了站点上的所有T ...
- GOF 23种设计模式-单例模式
• 创建型模式: – 单例模式.工厂模式.抽象工厂模式.建造者模式.原型模式. • 结构型模式: – 适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模 式. • 行为型模式: – ...
- 如何使用ssh远程编辑定时任务crontab?
linxu定时任务使用crontab,编辑crontab可以直接编辑:crontab -e:也可以直接读取文件 crontab file.这两种操作都不需要特殊权限sudo.区别在于,crontab ...
- c++ concurrency serial 1: introduction
platform: vs2012 Code#include <iostream> #include <thread> using namespace std; void Fun ...
- 如何让你的服务屏蔽Shodan扫描
1. 前言 在互联网中,充斥着各种各样的网络设备,shodan等搜索引擎提供给了我们一个接口,让我们可以在输入一些过滤条件就可以检索出网络中相关的设备. 对于我们的一些可能有脆弱性或者比较隐私的服务, ...
- myBatis-plus异常提示For input string: "{0=null}"
异常信息 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.Per ...
- gulp在ionic中的使用
简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm instal ...
- Android系统开发(6)——Linux底层输入输出
一.操作系统的体系结构 计算机是由一堆硬件组成的,操作系统是为了有效的控制这些硬件资源的软件.操作系统除了有效地控制这些硬件资源的分配.并提供计算机执行所须要的功能之外,为了提供程序猿更easy开发软 ...
- android页面间传递对象
android传递对象有两种方式: 一种是Serializable和Parcelable 对于第一种方式: import java.io.Serializable; public class Shop ...
- orcad元件属性批量修改(通过excel表格)
本文适合于没有使用CIS的情况下,提高元件属性修改的效率和BOM生成. 第一步:编号 首先给元件编好号: 如果是沿用旧工程,用这个编号.如果是创建的新工程,使用第二项,强制从头开始编号.因为编号与PC ...