【面试题】margin纵向重叠问题

最新推荐文章于 2023-06-26 16:09:12 发布

周兴

最新推荐文章于 2023-06-26 16:09:12 发布

阅读量160

点赞数

分类专栏：面试题文章标签：前端 html css

本文链接：https://blog.csdn.net/zx1041561837/article/details/127861064

版权

面试题专栏收录该内容

47 篇文章 1 订阅

订阅专栏

<style>
	p{
		font-size: 16px;
		line-height: 1;
		margin-top: 10px;
		margin-bottom: 15px;
	}
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

AAA和BBB之间的距离是多少？
答案：15px

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p>也会重叠

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

周兴

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【面试题】margin纵向重叠问题

相邻元素之间的margin重叠问题
复制链接

扫一扫

专栏目录

CSS 外边距(margin)重叠及防止方法

12-13

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下： a、全部都为正值，取最大者； b、不全是正值，则都取绝对值，然后用正值减去最大值； c、没有正值，则都取绝对值，然后用0减去最大值。注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继

Margin 纵向重叠（塌陷）问题和解决方法

m0_49456900的博客

02-11

799

Margin纵向塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。相邻元素的margin-top 和 margin-bottom 会发生重叠；空白内容的P标签、div标签等也会重叠。解决方法： 1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）。 2）为父盒子添加overflow：hidden； 3）为父盒子设定padding值； 4）为父盒.

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

margin纵向重叠和负值问题

aliven1的博客

09-23

428

<head> <style> p{ font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom:15px; } </style> </head> <body> <p>A</P> <p></p> <p></p> <p></p> &l.

【CSS面试题】margin纵向重叠的问题

Milk~每天分享一点点，技术进步一点点

07-16

736

margin纵向重叠的问题答案：15px 相邻元素的margin-top和margin-bottom会发生重叠（必须记住）空白内容的也会重叠核心代码演示： <style> p{ font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom:15px; } </style> </head> <b

margin纵向重叠的问题

最新发布

weixin_44759938的博客

06-26

165

在页面文档流内，块级元素和块级元素之间，垂直方向上，margin会合并为单个margin值，（也就是margin塌陷），这种只会发生在垂直方向。父元素的高度为auto，并设置了margin-bottom，最后一个子元素也设置了margin-bottom。没有内容的元素，自身的margin-top和margin-bottom发生重叠。父元素的margin-top和子元素的margin-top发生重叠。情况一，使用BFC属性，设置其中一个元素为BFC即可。情况三，给父元素设置高度，其余解决方法同二。

如何理解margin重叠问题

weixin_47450807的博客

04-08

3434

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

HTML与CSS面试题.docx

01-14

2. Margin纵向重叠问题和解决方法： Margin纵向塌陷现象是指小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。解决方法包括：1）为父盒子设置border；2）为父盒子添加overflow:hidden；3）为父盒子...

整理大厂高频核心前端面试题，五万多字，面试必考

猫老板的豆

09-13

2479

如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。

2022年前端面试题整理，持续更新中

jiey0407的博客

08-01

2834

rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性em是一个相对单位，是相对于父元素字体大小有继承性px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。因为Vue的组件可能会在很多地方使用，会产生多个实例，如果返回的是对象的，这些组件之间的数据是同一份（引用关系），那么修改其中一个组件的数据，另外一个组件的数据都会被修改到。...

Android常见基础面试题

lyy919062591的博客

10-12

2705

1. 请描述一下Activity 生命周期。答: 如下图所示。共有七个周期函数，按顺序分别是: onCreate(), onStart(), onRestart(), onResume(), onPause(),onStop(), onDestroy()。 onCreate(): 创建Activity时调用，设置在该方法中，还以Bundle的形式提供对以前存储的任何状态的访问。 onStart(): Activity变为在屏幕上对用户可见时调用。 onResume(): Activity开始与用户

如何解决外边距margin叠加的问题探讨

09-22

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，那么如何使元素上下margin不折叠呢？下面的方法或许对大家有所帮助

CSS：margin纵向重叠和负值问题

KongKong_Rac的博客

09-24

440

margin纵向重叠问题相邻元素的margin-top和margin-bottom会发生重叠；空白内容的<p></p>也会重叠 margin负值问题 margin-top和margin-left设置负值的话，元素会分别向上或向左移动； margin-right设置负值，右侧元素左移，自身不受影响； margin-bottom设置负值，下方元素上移，自身不受影响； ...

margin重叠问题及解决方案全览

比起未来可期，我更喜欢如约而至

02-05

4048

项目中遇到了margin重叠问题，基于之前对这块知识掌握不熟练，所以学习之后在这里做一个总结吧。

margin 重叠问题的理解。

liuhao9999的博客

03-23

473

【面试题】margin负值问题

zx1041561837的博客

11-15

277

本文介绍margin属性值为负数时的情况。

html+css面试题 行内元素padding和margin

weixin_33762321的博客

01-04

220

看到一个面试题 关于行内元素span的 <style> * { padding: 0; margin: 0; } span { padding: 100px; ...

理解 margin 垂直重叠的原因和解决方案

码的世界

01-11

1611

// 本文参考多篇文章，视频，官方文档而成，具体链接均在文中给出从 BFC 开始 margin 垂直方向重叠并不是一个 BUG 而是一种官方规定的规则，这个规则就叫做 BFC（block formating contexts），如果你还不了解 BFC，可以观看这个视频快速学习。如果你想看 w3c 关于 BFC 的 margin 垂直方向重叠的规定，点击这里在这个规定里，规定了 BFC 的其中一个特性，这个特性就是块级元素上下排列时，margin 重叠，且重叠的 margin 值为最大的那个值综上，m

关于margin上下重叠的问题