当div的内容有边距时，两个div的边界不相交
是因为CSS的盒模型导致的。
CSS的盒模型是用来描述HTML元素在页面中的布局和尺寸的一种模型。每个HTML元素都被看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。
当给一个div设置了边距（margin），实际上是给这个div的外边距添加了空白区域。这个空白区域会使得div的边界扩大，从而导致两个div的边界不相交。
具体来说，当两个div的边距相加的总和大于它们之间的距离时，它们的边界就不会相交。这是因为边距会扩大div的尺寸，使得它们之间的距离变小，从而导致边界不相交。
解决这个问题的方法有多种，可以使用CSS的浮动（float）属性或者定位（position）属性来控制div的布局，也可以使用CSS的flexbox布局或者grid布局来实现更灵活的布局。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
相关·内容
这是我的HTML和CSS代码。 border: 1px solid red; border: 1px solid green;}<p></p>Foo</div><p><&
浏览 27提问于2017-02-19得票数 0
请注意，我不是要纠正问题，而是想知道当包装器div设置了0px边框时，浮动div是如何获得空间的。但是，当包装器div设置了1px边框时，浮动div不会获得保证金，但在这两种情况下，secondDiv都按预期获得了最高保证金。 <<
浏览 1提问于2012-02-17得票数 2
回答已采纳
1回答
我有一个带小孩的盒子。这孩子有毛边。如果我在父元素(div.box)上设置了一个边框，元素的高度就会发生变化，如下图所示。诀窍在哪里？background: #0F3;} background: #0F3;.text {} <div class="text">Cont
浏览 0提问于2016-02-12得票数 0
回答已采纳
考虑一下这个基本的HTML：和CSS： background-color: lightgray;
padding-top: 0rem;
浏览 2提问于2014-08-06得票数 0
回答已采纳
*/}
margin-top: 100px;<div class="middle"></div>box-sizing: border-box;没有任何区别。带边框:没有滚动条
如果没<
浏览 4提问于2015-07-07得票数 8
每个盒子都被边界包围-- padding，border，margin。--为什么一个盒子需要三个边界？在任何两个框之间创建空白的margin是否还不够？
浏览 2提问于2015-09-17得票数 0
回答已采纳
下面的html文档有两个id='without，一个有边框(id='with')，另一个没有边框(Div)。带有边框的div (至少在firefox和chrome上)比带有边框的div要高得多。我原本期望它们的高度最多相差2个像素，然而，alert告诉我它们的高度相差了19个像素。<!height() + '
浏览 2提问于2012-11-29得票数 5
回答已采纳
我很难理解在嵌套元素中垂直边距折叠的概念。我在上写了一篇文章，解释了它是如何工作的，但我被它的解释搞糊涂了。因此，在它的示例中，它引用了两个元素，如下所示<div style="margin-top:20px"></div>
</div>由于内
浏览 1提问于2011-08-24得票数 8
回答已采纳
2回答
填充、列表和背景
、、、、
我真的很困惑，这是我这辈子见过的最奇怪的虫子。正如您所看到的，当我们的“注释”被悬停时，#content获得了奇异的页边距(但在CSS中没有页边距)。据我所知，这是ol的利润。但为什么他们不在母公司的范围之内？
好吧，真奇怪。但!当我们在padding: 0;的CSS中将padding: 1px;改为padding: 1px;时，我们看到，这个块没<
浏览 3提问于2014-11-02得票数 2
回答已采纳
请考虑以下几点：<div style='float: right; width: 50%'>content</div>
<div style='clear: both; margin-top: 50px'>content</div&
浏览 4提问于2015-05-30得票数 2
回答已采纳
2回答
我已经构建了一个div布局，每个div周围必须有边界。编辑：
如果边界折叠不适用于DIV，任何其他建议，我如何合并边界？
浏览 0提问于2014-04-29得票数 0
回答已采纳
当两个或多个div的相交点重叠时，它们的边界是可见的：.circle { width: 100px; border-radius: 50%;}
left: 50px; left: 100px;<div >
浏览 3提问于2020-02-14得票数 4
回答已采纳
我有以下几点： <div id="modal-body"> xxx </div> display: block;
margin-
浏览 1提问于2013-12-27得票数 2
有没有可能有一张桌子：
两个边框都在扩展，以匹配其中最高的内容的高度？通过使用Bootstrap行和col类，我尝试在每个单元格中添加一个div来对内容进行样式化，并且我可以在内容周围获得一个边距，但是单元格将与文本的高度不匹配。或者我可以通过删除d
浏览 2提问于2018-05-28得票数 0
回答已采纳
查看这个HTML示例-唯一的区别是然而第二个例子，div的偏移量是完全不同的吗？>
<div style="margin: 10px; border: 1px solid silver">A Title</div>>
</<em
浏览 2提问于2014-05-22得票数 3
;<body></body>
这是css2代码。© 2013 service center
浏览 5提问于2016-05-07得票数 2
回答已采纳
我有两个div，一个固定的，一个液体的。然而，每当我对流体div中的段落应用边距顶时，它不会填充div的整个高度，也会将固定的div推到它旁边。不幸的是，我不能使用overflow:auto来修复这个问题，因为我需要流体div使溢出:可视满足非常特殊的需要。奇怪，我知道，但我相信一定会有解决办法的。然而，我已经
浏览 7提问于2014-05-05得票数 0
回答已采纳
1回答
我在div里面有一个div。下面是CSS/HTML。我正在努力弄清楚如何使内部div具有真正的height: 100%;，而不存在溢出或不溢出的情况。无论我如何尝试，内部div的边框都会因为外部div的overflow: hidden而被裁剪。
由于某些原因，我不能修改任何一个div的内容或样式。不过，如果需要，我可以将内部div封装在
浏览 1提问于2016-10-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
