问题与对策：CSS的margin塌陷（collapse）_html/css

首页

web前端

html教程

问题与对策：CSS的margin塌陷（collapse）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:59 AM

css margin 对策

   2: <html>

登录后复制

   3: <head>

登录后复制

   4:     <title></title>

登录后复制

   5:     <metaname=""content="">

登录后复制

   6: <style>

登录后复制

   7: *{

登录后复制

   8:     margin:0px;

登录后复制

   9:     padding:0px;

登录后复制

  10: }

登录后复制

11:

登录后复制

  12: #no1{

登录后复制

  13:     background:#808000;

登录后复制

  14:     width:300px;

登录后复制

  15:     height:300px;

登录后复制

  16:     margin:100px 0 0 100px;

登录后复制

  17:     }

登录后复制

18:

登录后复制

  19: #no2{

登录后复制

  20:     background:#c0c0c0;

登录后复制

  21:     width:150px;

登录后复制

  22:     height:150px;

登录后复制

  23:     margin-left:20px;

登录后复制

  24:     margin-top:30px;

登录后复制

  25: }

登录后复制

  26: </style>

登录后复制

  27: </head>

登录后复制

28:

登录后复制

  29: <body>

登录后复制

30:

登录后复制

  31: <div id="no1">

登录后复制

  32:     <div id="no2">Span2</div>

登录后复制

  33: </div>

登录后复制

34:

登录后复制

  35: </body>

登录后复制

36:

登录后复制

  37: </html>

登录后复制

如果您认为应该是这样的话：

那就错了。结果是这样的：

因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin- top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。w3school也规定：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。所以对于代码：

   1: <div class="father"></div>

登录后复制

father这个div的高度为0，因为里面没有能够撑开div的内容。如果变为：

   1: <div class="father">I am here.</div>

登录后复制

则高度就是文字的高度，因为此时文字在撑着这个DIV。

话说回来，一个DIV和它的子DIV特别重视垂直边框或填充，也就好像是，一口锅，里面放个盆，能不能扣住里面的盆，主要看锅盖了，垂直边框或填充就是这个“锅盖”。于是解决的方式至少有以下三种：

1、需要给父div设置边框，当然可以设置边框为透明：

   1: border:1px solid transparent

登录后复制

   2: 或

登录后复制

   3: border-top:1px solid transparent

登录后复制

2、为父DIV添加padding，或者至少添加padding-top;

   1: padding:1px

登录后复制

   2: 或

登录后复制

   3: padding-top:1px;   /*必须大于0*/

登录后复制

3、为父DIV添加overflow:hidden

   1: over-flow:hidden;

登录后复制

来源：http://www.ido321.com/387.html

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7486

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么看日期 Apr 07, 2025 pm 03:03 PM

答案：可以使用 Bootstrap 的日期选择器组件在页面中查看日期。步骤：引入 Bootstrap 框架。在 HTML 中创建日期选择器输入框。Bootstrap 将自动为选择器添加样式。使用 JavaScript 获取选定的日期。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。