margin的两种特殊现象

最新推荐文章于 2022-12-20 10:23:27 发布

iceman_666

最新推荐文章于 2022-12-20 10:23:27 发布

阅读量254

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/iceman_666/article/details/52558949

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

外边距合并现象

如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会

生合并现象，合并以后的值是较大的那个。由于外边距的合并现象，所以将来在写代码的时候最好只给一个元素设

置margin-top,margin-left,最好不要设置margin-bottom.

margin塌陷现象

一个大盒子中有一个小盒子，给小盒子设置margin-top,那么两个盒子会一起向下移动，这就是margin塌陷现象。

解决办法：

1、给大盒子加一个边框；

2、设置overflow：hidden;

3、浮动

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iceman_666

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

div样式之margin

weixin_45637488的博客

04-03

2197

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .

margin值的特殊性

赵圆圆

04-24

514

从2016年10月接触前端，到现在大概1年多了吧，挺长的时间了，本以为自己的布局没有问题，毕竟还是有项目经验的，但是今天却发现自己不是很懂margin，这个前端最常见的属性之一，因此写下这篇作为知识梳理。借鉴：http://www.planabc.net/2007/03/18/css_attribute_margin/ http://www.hicss.net/do-not-tell-me-...

参与评论您还未登录，请先登录后发表或查看评论

“margin”外边距的各种奇特现象

老司机的后备箱

12-20

622

总的来说，我们在使用margin的时候还是要时刻注意一下这四种现象，特别是块级嵌套元素的塌陷现象,在我们使用margin来进行页面布局的时候很容易就出现塌陷现象，因此我们推荐在给父子元素之间设置距离的时候，最好使用padding，在兄弟元素之间设置距离的时候再使用margin，这样就能有效避免上述所出现的问题。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

margin塌陷及处理

泠泉石上的博客

08-28

2701

什么是margin塌陷，margin塌陷是指在使用margin布局时，特定情况下导致margin高度与代码中设计的高度不同。如 1. .outside { width: 100px; height: 100px; background: red; } .inside { width: 50px; height: 50px; background: green; margin-

margin塌陷

友人C君的博客

03-23

274

　当两个盒子在垂直方向上设置margin值时，会出现塌陷现象 1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 3、两个外边距一正一负时，折叠结果是两者的相加的和。　　1.给父盒子添加border 　　2.给父盒子添加padding-top 　　3.给父盒子添加overflow:hidden 　　...

CSS中margin的两种现象

安静的对折的专栏

08-31

560

margin设置两个标签边框之间的距离，但是会有两种现象： 1、margin 外边距的合并现象如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后取值较大的那个 .one { width: 2

IE6 float:left margin-left出现两倍像素

09-25

然而在IE6浏览器中，当这两个属性同时使用时，浮动元素的左边距值会莫名其妙地加倍，例如原本设置为10px的margin-left，实际显示效果会变成30px。这个问题的出现，与IE6浏览器对于CSS渲染的内部算法有关，它在处理...

firefox margin-top失效的原因与解决办法

10-30

如果遇到Firefox中`margin-top`失效的情况，可以尝试以下几种解决方法： - 检查是否有浮动元素与之相邻，并确保浮动元素后有清除操作。 - 如果元素使用了绝对定位或`inline-block`显示方式，则垂直margin不会折叠。...

理解margin塌陷和margin合并及其解决方案.docx

10-26

BFC是一种特殊的格式化上下文，它规定了内部元素如何布局以及与其他元素如何交互的规则。当一个元素被定义为BFC的一部分时，它会形成一个独立的渲染区域，该区域内元素的布局不再受到外部环境的影响，从而可以有效地...

上下两个div设置margin为20px，两个div的间距是多少，为什么？

jiwei_1234____5的博客

01-29

5159

答案是20 你们可能会想为什么不是40呢？这就要好好理解一下盒子模型了（如下图所示）盒子的大小由内容，内边距和边框决定，外边距只是用来吧周围的东西挤开并不算在盒子的大小里面。也就是说外边距只与自身有关，并不影响其他盒子的距离计算。换句话说就是上下两个div设置margin，最终的距离由大的决定例如：上下两个div设置margin分别为20px，30px，两个div的间距是30px ...

css中的margin是指,CSS中margin的两种现象

weixin_28685287的博客

08-04

497

margin设置两个标签边框之间的距离，但是会有两种现象：1、margin外边距的合并现象如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后取值较大的那个.one {width: 200px;height: 100px;background: red;margin-bottom: 30px;...

css margin参考和两个div水平排列的解决方案

ailw92114的博客

05-08

385

首先自己给出margin的四个值的顺序，这个不是难点但是自己列在这里作为参考吧：例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px...

上下元素margin重叠问题的解决办法（一种情况）

热门推荐

走在前端

01-02

1万+

问题描述：当两个元素纵向存在，上面的元素设有margin-bottom,下面的元素设有margin-top,有时候我们就会遇到一个奇怪的现象，那就是我们实际得到的两个元素之间的间距并非是上面两个值的和，而是其它值。具体情况：我们先编写如下HTML代码：这是div1 这是div2-1 CSS代码： * { margin:0; padd

margin重叠问题

weixin_43971228的博客

08-21

972

margin重叠 CSS中，两个或者多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。Margin按这种方式结合叫重叠（collapse），产生的结合的margin叫做重叠margin。 margin重叠的计算规则两个margin是相邻的，当且仅当：都属于流内块级盒，处于同一个块格式化上下文。没有行盒（line box），没有空隙，没有padding并且没有...

如何理解margin重叠问题

weixin_47450807的博客

04-08

3462

一、写在前面根据w3c规范，两个margin产生折叠的必备条件： 1、必须处于常规文档流（不能是浮动和定位）的块级盒子，并且处于同一个BFC当中。 2、没有线盒，没有空隙，没有padding和border将他们分割。 3、都处于垂直方向相邻的外边距。二、例子 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa

margin到底相对谁？

xiaowei的博客

09-09

6139

margin垂直方向上存在以下问题：外边距合并现象如果两个div上下排列，给上面div设置margin-bottom，给下面div设置margin-top，那么两个margin会发生合并现象，会取较大的margin值。注意：左右不会发生外边距合并现象上下塌陷现象一个大盒子中包含一个小盒子，给小盒子设置一个margin-top，大盒子会一起向下平移。注意：margin左右没有塌陷现

margin叠加问题及解决办法

MisTTT的博客

09-01

1444

css外边距（margin）重叠问题两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠；外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。同理，如果一个无内容的空元素，其自身上下边距也会产生重叠。防止外边距重叠解决方案外层元素padding代替内层元素透明边框 border:1px solid trans

margin或padding值为1个、2个、3个、4个的时候分别代表什么意思

m0_62404884的博客

05-27

8279

margin的值为4个时：margin：上右下左；（顺时针方向） margin的值为3个时：margin：上右= 左下； margin的值为2个时：margin：上=下左=右； margin的值为1个时：上=右=下=左； padding同理例如： margin：20px,30px,40px,60px ; (上20px，右3px，下 40px，左60px) margin：20px,30px,40px ; (上20px，左、右30px，下40...

简要解释外边距(margin)合并现象