程序员经验分享-hwhale

CSS margin 的奇怪行为，为什么？

2023-12-09

有下面的 HTML

<!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">
<body>
    <div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div>
    <div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div>
</body>
</html>

这两个 DIV 之间的空间只有 10 个像素。

为什么？请解释。


这种行为称为边缘塌陷。不添加保证金值，但使用较高的值：

某些框之间的垂直边距可能会折叠：

  • 正常流中两个或多个相邻的块箱垂直边缘会塌陷。生成的边距宽度是相邻边距宽度的最大值。 […]
  • […]
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

margins

CSS margin 的奇怪行为，为什么？ 的相关文章

  • Firefox 和 Chrome 为 offsetTop 提供了不同的值

    我试图相对于输入字段定位一个跨度元素 让我们称之为 工具提示跨度 为此 我将工具提示跨度和输入字段包装在另一个跨度元素中 我们称之为 包装器跨度 该元素具有position relative 然后我设置position absolute在工

  • Bootstrap - 为反向行模式创建移动自适应

    我想用 Bootstrap 创建一个反向效果 第一行 左边是文字 右边是图像 第二行 左边是图片 右边是文字 第三行 左边是文字 右边是图片 第四行 左边是图片 右边是文字 而且这种情况一直持续下去 它在大型设备上看起来非常漂亮 但当它在设

  • 可以设置选择元素的样式，以便在下拉列表“关闭”时显示所选选项的样式吗？

    鉴于这个简单的 html

  • 使用仅 CSS 菜单正确显示第三层子菜单

    我正在开发一个新网站 并且 css 菜单遇到问题 通过示例更容易解释 这是该网站的链接 http www webau net CSFF index asp http www webau net CSFF index asp 在 Home 父

  • 如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码？

    我最近检查了我的 CSS 文件 并将所有六位十六进制代码转换为简单的三位数代码 例如 我的 FDFEFF被缩短为 FFF 它呈现的颜色与以前几乎完全相同 在我看来 中间部分相当无用 删除它们在我的 CSS 文件中节省了整整 300 个字节

  • 使用 CSS 网格布局跨越所有列/行的项目

    随着 CSS 网格布局模块很快在 Firefox 和 Chrome 中发布 我想我应该尝试了解如何使用它 我尝试用一 个项目创建一个简单的网格a跨越所有行的左侧 其他项目 b c d e等 跨越各个行的右侧 跨越行右侧的项目数量是可变的 因

  • 如何使 Flexbox 父级具有其子级的宽度？

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa

  • 电子邮件通讯未正确呈现

    我是 CSS 和 HTML 新手 我有一个包含 HTML 和 CSS 代码的电子邮件模板 我在新闻通讯模板的右上角放置了一个粉色圆圈框 http www pedersenshotell se newsletter http www pede

  • 是否可以使 Font Awesome 图标大于“fa-5x”？

    我正在使用这个 HTML 代码 div class col lg 4 div class panel div class panel heading div class row div class col xs 3 i class fa f

  • HTML 和 CSS 的基本编码标准 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道它们是否是像 PSR 01 这样的 HTML 和 CSS 基本编码标准 我尝试谷歌搜索和搜索 但没有找到 我建议看看类似的东西

  • CSS 中的 &::before、&::after 是什么？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想创建一个垂直时间线 然后我发现了这个页面 http cssdeck com labs oz2nu681 http cssdeck

  • 停止 CSS 动画但让其当前迭代完成

    我有以下 HTML div class rotate div 以及以下 CSS webkit keyframes rotate to webkit transform rotate 360deg rotate width 100px hei

  • 为什么连字符不能与内部 一起使用？

    我正在尝试让连字符处理具有以下内容的文本 span 里面的元素用于突出显示 这似乎打破了连字符算法 有什么方法可以修复这种行为 使连字符的放置方式与没有连字符的位置相同 span 元素 我不是在问像这样的解决方法 shy 代码 沙箱 htt

  • MVC 5 Razor 活动导航选项卡

    我一直在尝试突出显示我的项目中的活动导航选项卡 我的任务是更新旧网站而不更改为引导程序 这是我的经验所在 我找到了一个包含我需要的大部分内容的示例 目前 唯一具有 选定类别 的选项卡是 主页 选项卡 当我单击另一个选项卡时 主页 选项卡不再

  • 如何从 Firefox 中的选择元素中删除箭头

    我正在尝试设计一个select使用 CSS3 的元素 我在 WebKit Chrome Safari 中得到了我想要的结果 但 Firefox 的表现不佳 我什至不关心 IE 我正在使用 CSS3appearance属性 但由于某种原因我无

  • CSS“概述”Webkit 和 Gecko 上不同的行为行为

    我正在做一个实验 我发现 轮廓 CSS2 属性在 Webkit 和 Gecko 上的实现方式不同 在下面的脚本中 我有一个绝对位置 div 在另一个 div 内 但浮动在其外部 Webkit 上的轮廓概述了实际的父 div 而在 Gecko

  • 为什么响应式图像需要“高度：自动”？

    是否有必要定义height auto现在 原因是什么 img max width 100 height auto Thanks 在没有明确设置高度尺寸的图像上 它实际上默认为自动高度 所以如果你设置max width 100 高度将由浏览器

  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持

  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中

  • 更改 CSS 样式表的选择器属性

    以下是我们传统上如何更改重复元素的样式 将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array

随机推荐

  • Oracle 中一列的前 n 个不同值

    我正在使用一个查询 其中一部分获取特定列的前 3 个 它创建该列的一个不同的子查询 限制为 3 行 然后将这些行过滤到主查询以执行前 3 项操作 WITH subquery AS SELECT col FROM SELECT DISTINC

  • 如果节点服务器宕机了。如何在 socket.io 上进行错误处理

    如何检测服务器状态 var socket io connect http nodeserver com 3000 这是我的代码 如果节点服务器 com 3000已关闭 我如何验证服务器是关闭还是启动 I tried 连接失败 error事件

  • url 中添加了不必要的 %E2%80%8B

    我在 axios create 方法中设置我的基本 URL 并在其他页面上使用它 但它在 URL 中添加了不必要的 E2 80 8B 有什么办法可以避免这个问题吗 这是我的代码块 import axios from axios const

  • 当

    我的网站上有以下代码 div div div div img src images blank150 gif div div

  • 阻止按钮提交表单 Javascript

    我正在学习 JavaScript 但无法在不提交表单的表单内制作按钮 有一个类似的问题here但指定的最受欢迎的答案type button 在我的情况下不起作用 其他答案涉及 jQuery 我现在想忽略它

  • System.IO. Compression.ZipArchive内存管理

    在 Net 4 5 中 System IO Compression ZipArchive 类得到了一些更新 正如这里可读的 http msdn microsoft com en us magazine jj133817 aspx 它现在应该

  • PHP中的文件上传问题

    您好 我正在尝试使用 php 脚本上传图像 真正奇怪的是我只在 Internet Explorer 中收到以下错误 其他脚本都可以正常工作 Warning move uploaded file pictures function move

  • ListView背景滚动数据

    是否可以使背景延伸到整个 ListView 而不是仅仅停留在固定位置 我记得在 CSS 中制作网站时 您可以将背景附件固定为背景在滚动时保持在同一位置 我试图归档与此相反的内容 使背景在您向下滚动时跟随数据 ListView有这样的东西吗

  • Heroku 临时文件系统和临时文件

    据我了解 Herokus 临时文件系统只允许您对临时文件夹进行写访问 当创建文件的 dyno 停止或重新启动时 在该文件夹中创建的文件将被丢弃 我不明白的是 如果测功机不停止或重新启动会发生什么 一定时间后文件还会被丢弃吗 我们目前正在构建

  • Predict() 返回太多值而不是一个

    我正在构建一个系统 根据最适合用户的内容从数据集中推荐一本书 问题是 不仅退还给我一本书 而且还出了很多书 我该如何解决 代码是这样的 from sklearn neighbors classification import KNeighb

  • Google Fusion 地图信息窗口未格式化

    我创建了一个包含 2 层的 Google Fusion Map 除 1 个例外外 一切似乎都正常工作 我已经使用 Google Fusion Table 工具格式化了两个图层的信息窗口 但是 第 1 层上的信息窗口并未按照以下代码的指定显示

  • pread 和 pwrite 未定义？

    我正在尝试使用 pread 和 pwrite 以便我可以 lseek 到文件的开头并开始在一个原子操作中读取或写入 这两个函数都会为我做到这一点 但是我遇到的问题是编译器给了我warning implicit declaration of

  • 获得良好性能的 Gem5 系统要求

    我必须在我的项目中使用 gem5 但想知道我应该购买什么硬件配置 我拥有一台 足够好 的笔记本电脑 但遗憾的是它不再可靠地工作 所以我不得不坚持使用一些低端笔记本电脑 我应该购买什么最低价格的处理器 还有AMD或者英特尔吗 也买不起苹果笔记

  • 将带有时区的日期字符串转换为时间戳

    我收到以下格式的日期2015 01 09T20 46 00 0100并需要将其转换为时间戳 不幸的是 strtotime 函数忽略了时区部分 print strtotime 2015 01 09T20 46 00 0100 n print

  • JTable 设置模型并保留列格式（宽度、对齐方式等）

    这是一次令人伤脑筋的经历JTable捆绑 这就是我所做的 我创建了一个JTable将列设置为指定宽度 并使用以下命令对其进行格式化renderers 并在其上添加了一些代码 但是当我尝试将其绑定到模型时 所有列都被模型的字段替换 有没有办法

  • 如何以编程方式更改 Active Directory 密码

    我有一组将要创建的测试帐户 但这些帐户将设置为要求在首次登录时更改密码 我想用 C 编写一个程序来检查测试帐户并更改密码 您可以使用用户主体 class 设置密码方法 前提是您有足够的权限 一旦找到正确的 UserPrincipal 对象

  • 文本更改时启动故事板

    我有一个 TextBlock 绑定到我的视图模型上的属性 我有一个故事板 使用不透明度属性淡入和淡出文本 我使用此文本在用户执行操作 成功 错误等 后向用户提供反馈 当视图模型的属性发生更改时 如何启动 StoryBoard 有没有更好的方

  • 如何在 google-cloud-ml 中设置 pytorch

    我尝试放弃工作Pytorchgoogle cloud ml 中的代码 所以我编写了 setup py 文件 并添加选项 install requires 设置 py from setuptools import find packages

  • MySQL 检查是否存在多行

    Here you can find how to check row existance SELECT EXISTS SELECT 1 FROM table1 WHERE some condition 如何有效地从表中存在多行 例如 SEL

  • CSS margin 的奇怪行为，为什么？

    有下面的 HTML div style width 400px height 200px background color Gray margin bottom 10px div div style width 400px height 2

热门标签