HTML中div嵌套div的margin不起作用
下面介绍一下div嵌套div时margin不起作用的解决方案。
顺便科普下margin的定义和用法。
div嵌套的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background-color: dodgerblue;
}
.box{
width: 300px;
height: 300px;
margin: 30px;
background-color: gray;
}
.box .child{
width: 200px;
height: 200px;
margin: 50px;
background-color:darkturquoise;
}
</style>
</head>
<body>
<div class="box">
<div class="child"> </div>
</div>
</body>
</html>
实际效果：
这其实不是我们想要的效果，先来说下为什么会出现这个问题：
有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
解决该问题我们需要先了解ie特有的一个属性haslayout。
我们要实现的效果是这样的：
最后我们来说一下解决方法：
1、让父元素生成一个block formating context（块级格式化上下文，可自行百度了解），以下属性可以实现
float: left/right
position: absolute
display: inline-block
overflow: hidden/auto
2、给父元素添加border或者padding
以方法一的overflow:hidden为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background-color: dodgerblue;
}
.box{
width: 300px;
height: 300px;
margin: 30px;
background-color: gray;
overflow: hidden;
}
.box .child{
width: 200px;
height: 200px;
margin: 50px;
background-color:darkturquoise;
}
</style>
</head>
<body>
<div class="box">
<div class="child"> </div>
</div>
</body>
</html>
最终效果：
HTML中div嵌套div的margin不起作用的更多相关文章
- div嵌套引起的margin-top不起作用
通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...
- div嵌套引起的margin-top不起作用（转）
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- div中嵌套div速度将会同样很慢
---恢复内容开始--- div中嵌套了div速度将会同样很慢 最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...
- HTML里为什么不能在<p>标签中嵌套<div>标签
学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...
- div中嵌套div中使用margin-top失效问题
div中嵌套div中使用margin-top失效问题
- ie7中ul不能嵌套div和li平级
我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱! 代码: <ul class="catshow"> ...
- html标签被div嵌套页面字体变大的解决办法
html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...
- div嵌套引起的内层margin-top对外层div起作用
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
随机推荐
- 你不知道的前端SDK开发技巧
最近在做公司内部的一个的一个SDK的重构,这里总结一些经验分享给大家. 类型检查和智能提示 作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我 ...
- NOI 2003 逃学的小孩 （树的直径）
[NOI2003 逃学的小孩] 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一 ...
- Pop!_OS安装与配置（二）：基础配置
Pop!_OS相关使用配置 #0x0 书接上回 #0x1 换源 #0x10 nopasswd sudo #0x11 换国内源 0x2 安装应用 #0x0 书接上回 首先请看上一章末尾, Pop!_OS ...
- Java集合类初探
目录 概述 Iterable和Iterator Collection List Queue Set Map 概述 Java中基本的常用的集合类,主要包含: List Set Queue Map 这 ...
- Maven 专题（二）：vscode 创建一个java Maven项目（vscode）以HdfsClientDemo 为例
1.打开vs code软件,最好创建好自己的工程并使用vs code打开 2. 使用快捷键ctrl + shift + p按键,输入maven进行搜索,选中如图诉讼hi的create mavene ...
- 数据可视化之powerBI入门（十一）认识Power BI数据分析语言DAX
DAX是英文Data Analysis Expression的缩写,意思是数据分析表达式,从名称上就可以看出,DAX公式是用作数据分析的,事实上也确实如此,从数据分析层面认识DAX会更有助于我们理解它 ...
- Configurate vim tool
vim tool is a commom editor, for the sake of improving effeicient, it is necessary to configurate vi ...
- day5：isinstance&代码块&分支&while循环
1.判断类型 isinstance语法:用法一: isinstance(要判断的值,要判断的类型) 返回True 或者 False用法二: isinstance(要判断的值,(可能的类型1,可能的类型 ...
- 《你还在写sql语句吗？》人生苦短，进入MybatisPlus的丝滑体验
一.发展历程 依稀记得大学期间,类中写sql语句的日子,一个sql语句占据了大部分时间,到后来hibernate的出现算是解决了这一痛点.工作 后,我们又接触到了mybatis这样的框架,瞬间感觉这个 ...
- 史上最全的 jmeter 获取 jdbc 数据使用的四种方法
jmeter使用jdbc协议获取数据库中数据,很多人都会用,因为大家在做测试的时候,有时候需要大量的用户进行登录,获取需要数据库中真实的数据用于测试,所以常常会用jdbc来获取数据库数据. 那从数据库 ...