margin的塌陷现象

1、标准文档流中，margin不叠加，以较大的为准。

案例代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>margin的塌陷现象</title>
 5     <style type="text/css">
 6         .div1{
 7             width: 100px;
 8             height: 100px;
 9             background-color: red;
10             margin-bottom: 10px;
11         }
12         .div2{
13             width: 100px;
14             height: 100px;
15             background-color: yellow;
16             margin-top: 30px;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="div1"></div>
22     <div class="div2"></div>
23 </body>
24 </html>

效果如下：

2、如果对两个盒子都设置了浮动属性，并且他们都位于水平位置。margin会叠加：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>margin的塌陷现象</title>
 5     <style type="text/css">
 6         .div1{
 7             width: 100px;
 8             height: 100px;
 9             background-color: red;
10             float: left;
11             margin-right: 10px;
12         }
13         .div2{
14             width: 100px;
15             height: 100px;
16             background-color: yellow;
17             float: left;
18             margin-left: 30px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="div1"></div>
24     <div class="div2"></div>
25 </body>
26 </html>

效果图如下：

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷问题的。

转载于:https://www.cnblogs.com/myunYao/p/8952224.html

margin的塌陷现象相关推荐

margin塌陷现象div盒子嵌套盒子外边距合并现象
问题描述:原型大概是"一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background="red&qu ...
解决margin塌陷问题
一:什么是margin塌陷 ? 在标准文档流中,竖直方向(左右方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的 ...
Auto Lisp 标注子样式_CSS 核心样式
CSS核心样式粗细font-weight 作用:设置文字是否加粗显示属性名: font-weight, 属于font属性的一个单-属性属性值有两种方式:单词类型.数字类型单词类型数字类型 1 ...
CSS基础必备知识点03
1.标准文档流什么是标准文档流? 制作HTML网页和PS画图软件画图有本质上的区别:HTML网页在制作的时候都遵循一个"流"的规则:从左到右.从上到下:使用PS软件画图时,我们想 ...
（10）CSS 常用样式--盒模型扩展应用
一.清除默认样式大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响.为了避免默认样式对整体布局效果造成影响,一定要清除默认样式. 盒模型属性中内外边距:大部分容器级标签都有默认边距,要么用 ...
《css设计彻底研究》读书笔记之　盒子模型
一.在给元素设置背景时 IE作用域:content + padding Firefox作用域:content + padding + border 二.border border-color : re ...
1-2 CSS常用样式笔记
文章目录 CSS常用样式字体属性文本属性盒模型属性宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用清除默认样式高度height应 ...
CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表用于给HTML标签添加样式 CSS3是CSS的最新版本增加了大量的样式/动画/3D特效以及移动端特性前端 ...
1.2.1css简介
css简介 CSS (Capcading Style Sheets 的缩写),翻译为"层叠样式表"或者"级联样式表",简称样式表 css主要作用它主要 ...

margin的塌陷现象

margin的塌陷现象相关推荐

最新文章

热门文章