1.使用padding

2.给父级使用border

3.给父级添加属性 overflow:hidden

4.浮动

5.定位{absolute,fixed}

6.伪元素代码

.parent:before{
content: "";
display: table;
}

父子margin塌陷的更多相关文章

  1. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  2. margin塌陷与margin合并(margin),清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  3. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  4. 6.margin塌陷问题

    当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><ht ...

  5. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  6. 解决margin塌陷和margin合并

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  8. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  9. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

随机推荐

  1. type &#39;simple Class&#39; does not conform to protocol &#39;Example Protocol&#39;错误

    在看swift教程中"接口和扩展"这小部分. 在编写时提示"type 'simple Class' does not conform to protocol 'Examp ...

  2. 简单日志LogHelper

    public static class LogHelper { //日志存储路径 private static string LogPath = Path.Combine(AppDomain.Curr ...

  3. Docker安装配置教程

    Docker公开课 1 Docker介绍 1.1 Docker是什么 云计算\云服务 IAAS(基础设施即服务).PAAS(平台即服务).SAAS(软件即服务) Docker到底是什么呢? Docke ...

  4. 开启Windows 7远程桌面功能的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 本设置方法同样适用用Vista和Windows Server 2008. 1.依次点击"开始"菜单 ...

  5. 如何在VMware中创建虚拟机

    今天给大家分享如何在VMware中创建虚拟机,具体的教程如下.在这里小编提前下载了Ubuntu14.04桌面系统,为后面在虚拟机中安装Ubuntu14.04桌面系统做准备. 1.从官网上或者直接百度上 ...

  6. ES6第一节:开发环境的搭建

    前言:由于目前浏览器对ES6的支持度不高,需要借助babel将编写好的ES6代码转换成ES5,浏览器才能解析. 需要在NodeJS环境下运行 一. 建立结构:两个文件夹和一个html文件,分别是src ...

  7. Idea下mybatis的错误—Module not specified

    IDEA下使用maven的mybatis常见错误 错误类型一:导入项目引起的错误Module not specified 错误提示:idea Error Module not specified. 错 ...

  8. 数据持久化-存取方式总结&应用沙盒&文件管理NSFileManager

    iOS应用数据存储的常用方式:  1.XML属性列表   (plist归档)  2.NSUserDefaults (偏好设置)  3.NSKeyedArchiver  归档(加密形式)  4.SQLi ...

  9. cogs 1500. 误差曲线

    1500. 误差曲线 ★★   输入文件:errorcurves.in   输出文件:errorcurves.out   评测插件时间限制:1 s   内存限制:256 MB [题目描述] Josep ...

  10. 用Shell脚本过滤Hadoop中不能訪问的节点

    近期使用的一个集群hp1,由于维护集群的人不给力.节点总是过一段时间就掉一两个.今天发现重新启动hadoop时,HDFS已经进入保护模式了. 决定把slaves节点中的无法訪问的节点所有过滤掉.所以写 ...