盒子外边距合并问题

最新推荐文章于 2022-05-12 11:21:03 发布
最新推荐文章于 2022-05-12 11:21:03 发布
阅读量578 收藏
点赞数 1
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HWSss/article/details/103758805
版权

两个div盒子一排
第一个margin-bottom为正 20px
第二个margin-top 为正 20px
两个盒子的外边距会合并 为10px;
也就是说两个盒子自身的外边距是盒子自身的一半 负数也是一半值是负数
两个数值和为零会合拼
在这里插入图片描述
在这里插入图片描述
安照上面所述 一正一负数值是一样会链接在一起
比如上20px 下面盒子是-20px 是和合并在一起

如果二个盒子是在一排的
margin-right:20px
margin-left:20px
两个盒子之间的外边距不会合并
一正一负 数值相加为零会合并 不等于零 会是负数的外边距的一半

编程奥特曼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 考试题（四）
HAI6545的博客
12-18 9228
一、单选题（共20题，每题2分） 1.下面选项中,可以设置页面中某个DIV标签当内容溢出的时候出现滚动条的是( ) Aoverflow:hidden Bdisplay:block Coverflow:scroll Ddisplay:scroll; 正确答案:C 解析:超出显示滚动条用的是overflow：auto或者scroll； 2.以下各选项描述正确的是( ) A标题标签、段落标签、<span>标签都是块级元素 B<div>...
布局内嵌盒子外边距合并问题
weixin_45397914的博客
07-17 257
    在html布局中经常会出现两个嵌套的盒子，内嵌的盒子加外边距会被外面的盒子合并，就不能正确的显示出来。 .father { width: 200px; height: 200px; background: pink; } .son { width: 50px; height: 50px; background: skyblue; margin-top: 50px; }     要解决这个嵌套盒子的子盒子外边距被父盒子合并的问题，可以使用一下三种方式： 1、
盒子，外边距
a406011489的博客
04-13 438
1、标准盒子模型与怪异盒子模型 简单而言： 标准盒模型 width 和 height 属性所指定的宽高就是实际内容区的大小，而盒子实际大小是： 横向空间：width + padding宽度 + border宽度 纵向空间：height + padding宽度 + border宽度 怪异盒模型 在怪异模式下，width 和 height 做指定的宽高就是盒子的实际宽高，而它内容区部分的大小...
（四）盒子模型之外边距
weixin_47481102的博客
05-12 2668
1.外边距 margin属性用于设置外边距，即控制盒子和盒子之间的距离。 属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 margin简写方式代表的意义跟padding完全一致。 如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=
盒子模型
逆天骚年的博客
08-27 533
 margin 指定盒子边框与外部内容的距离 既可以作用于同级元素之间，也可以作用于父级元素与子级元素之间       div{ margin:10px;} 上下左右的边距均为10px       div{ margin:10px 20px;} 上下边距为10px,左右边距为20px       div{ margin:10px 20px 30px;} 上边距为10px, 左右边距为2
CSS学习第三周
Zhangzanhao的博客
02-13 314
字体阴影 字体阴影的属性是text-shadow，它要填四个要素，分别是 水平位置，竖直位置，模糊程度，阴影颜色 在阴影颜色后加上一个逗号可继续写下一个阴影的属性
css盒子模型 css margin 外边框合并
12-01
为了避免外边距合并，可以使用内边距、边框，或者使用`display`属性改变元素的布局方式，例如将元素设置为`inline-block`或`flex`元素。 在总结中，CSS盒子模型是理解网页元素布局的核心，包括内容、内边距、边框和...
CSS 外边距(margin)重叠及防止方法
12-13
按照W3C规范，当两个或多个块级元素的垂直外边距相遇，它们的边界会合并，结果的外边距宽度将是这些外边距中的最大值。如果涉及到负外边距，计算方式会更复杂：首先，取最大正外边距，然后从这个最大值中减去绝对值...
css 盒子模型理解1
08-03
理解外边距合并、`box-sizing`的用法以及如何处理浏览器兼容性问题，能帮助开发者更高效地进行页面布局，提高代码的可维护性和一致性。通过不断实践和学习，开发者可以更好地应对各种布局挑战，创建出美观且功能完善...
盒子模型（下）
01-07
导图 **一. 和标记** 1. 标记 简单而言就是一个区块容器...1.相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时 ，如果上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直边距是两者较大者，这
盒子模型PPT学习教案.pptx
10-10
需要注意的是，块级元素的垂直外边距有时会发生合并，这被称为“外边距塌陷”。 **盒子模型的理解与应用**： 网页设计中的布局往往是多个盒子的嵌套和排列。通过调整盒子模型的各个属性，我们可以精确控制元素的...
盒子模型与内外边距设置
null-hands的博客
11-16 2493
盒子模型 （1）box-sizing:content-box: 盒子模型默认值，元素应用该模型时，计算方式为 外边距+边框宽度+内边距+内容区域（margin ， border-width ，padding，实际内容占宽），设置的width/height属性只是内容区域宽度； （2）box-sizing:border-box: 元素应用该模型时，计算方式为 外边距+宽度，设置的宽度包含了 边框宽度+内边距+内容区域，这种方式更方便我们平时的布局，省却了很多人为的计算过程； 外边距 （1）margin..
盒模型基础(边框 内边距 外边距)
sinat_38404216的博客
07-16 952
盒模型基础： 盒模型包含：填充内容、内边距(padding)、边框(border)、外边距(margin)。 盒模型 在这里插入图片描述 在运行网页中右键 检查，点击要选择的对象即可看到对应盒模型 1.内边距（padding） 方式1.上下左右均填充20px padding:20px 方式2. 上下 左右 分别填充 padding: 10px 20px 方式3.上 左右 下 分别填充 padding:20px 50px 0px 方式4.上 右 下 左 分别填充
关于盒子的左右外边距的困惑
qq_37621289的博客
10-08 2144
之前一直有一个疑问：对于左右摆放的两个盒子，在水平方向上都可以自由移动，如果给左边盒子一个margin-right值，是左边的盒子往左走，还是右边的盒子往右走。答案是后者。 对于外边距，看的时候只看一个盒子，不要两个盒子一起看，否则容易混淆。对于一个盒子来说，给它一个margin-left，盒子会走。给它margin-right，盒子是不动的。如果想让盒子走只能通过设置其margin-right值...
CSS 学习笔记 - 盒模型
灵台方寸山斜月三星洞
09-03 237
CSS学习笔记 - 背景边框背景backgroundbackground-image 背景图边框borderborder-image-source 边框图片参考资料 背景background 支持纯色、渐变、图片 background-image 背景图 支持多张 1.1. 用逗号分隔。先上后下 1.2. 相应控制属性也一样用逗号分隔。 支持各种填充方式 边框border border-image-source 边框图片 参考资料 MDN：CSS_背景、边框 官方页面上有个推荐的样式生成器 ..
html盒子模型外边距,CSS基础学习十五：盒子模型补充之外边距合并
weixin_39683598的博客
06-05 244
今天继续接着CSS盒子模型补充，CSS基础学习十三：盒子模型和CSS基础学习十四：盒子模型补充之display属性设置都是介绍了盒子模型中的内容概括。开始今天的主题：外边距合并。外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。(1)外边距合并外边距合并叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多...
盒子模型的外边距与内边距学习笔记
weixin_52235791的博客
12-16 2475
盒子模型的外边距与内边距学习笔记 1.外边距margin 盒子与盒子之间的间距称为外边距，分四个方向（上右下左-顺时针方向） 属性名 描述 margin-left 距离左侧的距离 margin-right 距离右侧的距离 margin-top 距离顶部的距离 margin-bottom 距离底部的距离 演示： <head> <style > div{ /* div标签左外边距设置为网页20%宽度的大小
两个盒子外边距取较大值
weixin_30892987的博客
04-03 528
情景：两个盒子，第一个盒子设置100px的下外边距，第二个盒子设置200px的上外边距，试问两个盒子相差多少px？ <body> <div class="box1">第一个盒子设置100px的下外边距</div> <div class="box2">第二个盒子设置200px的上外边距</div> </bo...
盒子模型/设置边框/内边距、外边距
热门推荐
IT_CREATE的博客
11-09 1万+
盒子模型 在HTML中，浏览器在解析每一个标签元素时，都会将标签解析成一个装东西的盒子，超文本标记语言中，内容本身就定义在标签内部的。它将标签解析一个一个盒子，盒子之间存在间距，盒子内部装的东西与盒子之间也存在间距，并且盒子本身也是存在边框的。   盒子本身的边框也就是(边框border )，盒子和盒子之间的距离也就是(外边距 margin ) ，盒子到内容之间的距离也就是(内边距paddi...
外边距合并会发生在垂直排列的div之间吗？外边距合并会发生在水平排列的div之间吗？
最新发布
05-25
外边距合并在垂直排列的div之间会发生，但是在水平排列的div之间通常不会发生。当相邻的两个垂直元素的上下外边距重叠时，它们将合并为一个外边距，高度等于两个外边距中的较大值。而在水平排列的div之间，外边距通常不会发生合并，因为它们位于不同的行内盒子中。但是，在某些情况下，例如使用浮动或定位元素时，水平元素之间也可能发生外边距合并。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值