整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果你设置了两个相邻的 div 的 margin 为 8px ，但实际显示的间距只有 8px 而不是预期的 16px ，这可能是因为 CSS 中的外边距重叠（margin collapsing）导致的。
外边距重叠是指当两个垂直相邻的块级元素具有相邻的外边距时，它们的外边距会合并为一个外边距，取其中的最大值作为最终的外边距值。这可能会导致你看到的实际间距小于预期值。
为了避免外边距重叠，你可以尝试以下方法：
给其中一个 div 添加内边距（padding）： 可以给其中一个 div 添加内边距，而不是使用外边距来实现间距的效果。这样就不会发生外边距重叠。
使用空的块级元素来间隔： 可以在两个 div 之间添加一个空的块级元素（例如 <div></div> ），并给这个元素设置期望的外边距。这样可以避免外边距重叠问题。
使用 flex 布局或者绝对定位： 可以考虑使用 flex 布局或者绝对定位来控制元素之间的间距，这样可以避免外边距重叠问题。
下面是一个使用空的块级元素来间隔的示例代码：
<div class="container">
<div class="box"></div>
<div class="spacer"></div>
<div class="box"></div>
</div>
.container {
display: flex;
}
.box {
width: 50px;
height: 50px;
background-color: lightblue;
margin: 8px;
}
.spacer {
flex: 1;
}
通过以上方法，你应该可以避免外边距重叠，实现两个 div 之间的间距为 16px 的效果。
东IT优就业
什么是margin、padding?margin和padding的区别和用法又是什么?广州IT培训老师告诉你。
marigin：就是外边距。padding：就是内边距。panda是熊猫大家都是知道吧，熊猫是我们中国的国宝而且都很可爱，所以看见padding就知道了是内边距是吧。
一、margin和padding的用法
二、其他的方法
margin和padding都是简写属性，他们可以直接在里面设置他们的属性。即：margin/padding：值 。但是这个样子写的话都把所有的值都设置了还能让其他的值都单个的写吗?方法是有的：
当你写的margin/padding写的没毛病的时候，他没有给显示出来我想要的结果是什么情况?
这种情况出现的时候请你先检查你的代码是否有问题，若是代码没有问题的话就是出现了BUG。那么该如何解决的?
当你的margin出现问题的时候只要在父元素中加入overflew：hidden 就可以解决它的问题。但是当你的父元素出现溢出情况的时候就回隐藏。
当你的padding出现问题的时候只要在元素中加入box-sizing：border-box 就可以解决它的问题。
希望广州IT培训老师分享的内容对大家有所帮助。
广东IT优就业
出处：www.cnblogs.com/CcPz/p/8185489.html
更多IT精彩推荐：
带你打开世界第一编程语言的大门：http://www.ujiuye.com/zt/java/?wt.mc_id=17009338
例
设置一个p元素的右边距：
p
{
margin-right:2cm;
}
属性定义及使用说明
margin-right属性设置元素的右边距。
注意： 负值是允许的。
| 默认值： | 0 |
|---|---|
| 继承： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.marginRight="10px" |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| margin-right | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
属性值
| 值 | 描述 |
|---|---|
| auto | 浏览器设置的右外边距。 |
| length | 定义固定的右外边距。默认值是 0。 |
| % | 定义基于父对象总高度的百分比右外边距。 |
| inherit | 规定应该从父元素继承右外边距。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
