嵌套div中margin-top转移问题的解决办法
在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

</head>

<body>

<div style="background-color:#FF0000;width:300px; height:100px">上部层</div>

<div style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->

    <div style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</div>

</div>

</body>

</html>

原因：盒子没有获得 haslayout 造成 margin-top无效

解决办法：

1、在父层div加上：overflow:hidden；

2、把margin-top外边距改成padding-top内边距 ；

3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。父层div加： padding-top: 1px;

4、让父元素生成一个 block formating context，以下属性可以实现

* float: left/right

* position: absolute

* display: inline-block/table-cell(或其他 table 类型)

* overflow: hidden/auto

div嵌套引起的内层margin-top对外层div起作用的更多相关文章

  1. 多个div嵌套，获取鼠标所点击的div对象

    我选择的是冒泡事件 $(function() { $("#主divID").on("click",function(e) {//主div是必须存在的 //冒泡事 ...

  2. 让内层Div将外层Div撑开

    在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...

  3. html标签被div嵌套页面字体变大的解决办法

    html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...

  4. HTML中div嵌套div的margin不起作用

    下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...

  5. DIV的Position属性和DIV嵌套DIV

    1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...

  6. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  7. div嵌套导致子区域margin-top失效不起作用的解决方法

    有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...

  8. div嵌套引起的margin-top不起作用

    通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...

  9. div嵌套引起的margin-top不起作用（转）

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

随机推荐

  1. Python机器学习笔记：SVM（1）——SVM概述

    前言 整理SVM(support vector machine)的笔记是一个非常麻烦的事情,一方面这个东西本来就不好理解,要深入学习需要花费大量的时间和精力,另一方面我本身也是个初学者,整理起来难免思 ...

  2. 数据库之 MySQL --- 数据处理 之 表操作、CRUD（六）

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一. 表操作 创建数据库CREATE DATABASE demo-- 删除数据库DROP DATABAS ...

  3. Java实现 蓝桥杯VIP 算法提高 项链

    算法提高 项链 时间限制:1.0s 内存限制:512.0MB 问题描述 由 n(1≤n≤100) 个珠子组成的一个项链,珠子有红.蓝.白三种颜色,各种颜色的珠子的安排顺序由键盘输入的字符串任意给定.蓝 ...

  4. Java实现矩阵相乘问题

    1 问题描述 1.1实验题目 设M1和M2是两个n×n的矩阵,设计算法计算M1×M2 的乘积. 1.2实验目的 (1)提高应用蛮力法设计算法的技能: (2)深刻理解并掌握分治法的设计思想: (3)理解 ...

  5. Android开发之StrictMode

    StrictMode简介 Android开发者官网对StrictMode的介绍 StrictMode类是Android 2.3(API 9)引入的一个工具类 用来帮助开发者发现代码中一些不规范的问题, ...

  6. ASP.NET Core 3.1 WebApi+JWT+Swagger+EntityFrameworkCore构建REST API

    一.准备 使用vs2019新建ASP.NET Core Web应用程序,选用api模板: 安装相关的NuGet包: 二.编码 首先编写数据库模型: 用户表 User.cs: public class ...

  7. gitee+picgo搭建个人博客图床

    gitee+picgo搭建个人博客图床 准备 首先需要去码云注册一个账号,并新建一个仓库.接着下载PicGO并安装好. 过程 点击左下方的插件设置. image 在搜索框中输入gitee搜索插件,安装 ...

  8. 一个简单的CSS登录页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Stylus 之 网教通直播间整修

    暗色模式 效果 Mozilla 格式源代码 @-moz-document domain("fj.101.com") { * { transition: all .3s; } #wj ...

  10. 修改MSSQL的端口地址_TcpPort_数据库安装工具_连载_2

    修改MSSQL的端口地址_TcpPort,可在程序中调用,从而修改TcpPort Use master Go ------------------------------ --1)在注册表中查询 Pi ...