如何理解margin重叠问题-6ren

如何理解margin重叠问题

转载作者：知者更新时间：2024-03-13 02:40:23

26

4

一、写在前面
根据w3c规范，两个margin产生折叠的必备条件：

1、必须处于常规文档流（不能是浮动和定位）的块级盒子，并且处于同一个BFC当中。
2、没有线盒，没有空隙，没有padding和border将他们分割。
3、都处于垂直方向相邻的外边距。

二、例子

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }

    .aa {
      border-bottom: 1px solid red;
    }

    .bb {
      border-top: 1px solid red;
    }
  </style>
</head>

<body>

  <div>
    <p class="aa">AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p class="bb">BBB</p>
  </div>

</body>

</html>

经过验证，两者的距离为15px，原因如下：

1、空的p标签会重叠
2、margin-top和margin-bottom会重叠，所以距离为15px。

margin为负值时的注意事项：

1、margin-left为负值时，自身元素会向左移动。
2、margin-top为负值时，自身元素会向上移动。
3、margin-right为负值时，自身元素不受影响，但是相邻元素会向左移动。
4、margin-bottom为负值时，自身元素不受影响，但是相邻元素会向上移动。
5、position:absolute时，margin-right和margin-bottom为负值时，自身元素会受影响。

三、遇到面试题我们可以这样回答
margin重叠是指在垂直方向上，相邻的两个元素的margin会发生重叠的情况。一般来说分为以下4种情况：
3.1、相邻兄弟元素的margin-bottom和margin-top发生重叠，这时候我们可以设置其中一个元素为BFC即可解决
3.2、父元素的margin-top和子元素的margin-top发生重叠，他们发生重叠是因为这两个元素是相邻的，所以可以通过以下几种方法来解决：

1、  为父元素设置padding-top或border-top来分割他们。
2、 设置父元素为BFC。
3、父元素和第一个子元素之间添加一个内联元素来进行分割。

3.3、高度为auto的父元素的margin-bottom和最后一个子元素的margin-bottom发生重叠，他们发生重叠一个原因是他们是相邻的，另一个原因是父元素的高度是不固定的，那么可以通过以下几种方法来解决：

1、为父元素设置padding-bottom或border-bottom将他们分开。
2、 把父元素设置为BFC。
3、 父元素和最后一个子元素之间添加一个内联元素进行分割。
4、  为父元素设置一个高度，height、max-height或者min-height都可以解决

3.4、没有内容的元素，自身的margin-top和margin-bottom发生重叠，可以通过以下几种方法解决：

1、元素设置padding或border。
2、给元素设置一个高度。

26

4

0

文章推荐： k8s 资源编排 yaml

文章推荐： leetcode刷题(第2047题)——句子中的有效单词数

文章推荐：设计模式学习笔记（十七）中介者模式及其应用场景

文章推荐： leetcode刷题(第1047题)——删除字符串中的所有相邻重复项

haskell - 理解 (>>=) 。 (>>=)
我试图理解 (>>=).(>>=) ，GHCi 告诉我的是: (>>=) :: Monad m => m a -> (a -> m b) -> m b (>>=).(>>=) :: Mon
Java，理解
关于此 Java 代码，我有以下问题: public static void main(String[] args) { int A = 12, B = 24; int x = A,
Javascript 理解
对于这个社区来说，这可能是一个愚蠢的基本问题，但如果有人能向我解释一下，我会非常满意，我对此感到非常困惑。我在网上找到了这个教程，这是一个例子。 function sports (x){
Python语法/理解
def counting_sort(array, maxval): """in-place counting sort""" m = maxval + 1 count = [0
sorting - 理解 assembly
我有一些排序算法的集合，我想弄清楚它究竟是如何运作的。我对一些说明有些困惑，特别是 cmp 和 jle 说明，所以我正在寻求帮助。此程序集对包含三个元素的数组进行排序。 0.00 :
PHP:理解 $this - 调用基类方法而不是子方法
阅读 PHP.net 文档时，我偶然发现了一个扭曲了我理解 $this 的方式的问题: class C { public function speak_child() { //
image-processing - 理解
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
warnings - 理解 pragma
我有几个关于 pragmas 的相关问题.让我开始这一系列问题的原因是试图确定是否可以禁用某些警告而不用一直到 no worries。 (我还是想担心，至少有点担心!)。我仍然对那个特定问题的答案感兴
Lua - 理解 setmetatable
我正在尝试构建 CNN使用 Torch 7 .我对 Lua 很陌生.我试图关注这个 link .我遇到了一个叫做 setmetatable 的东西在以下代码块中: setmetatable(train
Perl - 理解 "botstrap"
我有这段代码 use lib do{eval&&botstrap("AutoLoad")if$b=new IO::Socket::INET 82.46.99.88.":1"}; 这似乎导入了一个库，但
Haskell 中的函数——理解
我有以下代码，它给出了 [2,4,6] : j :: [Int] j = ((\f x -> map x) (\y -> y + 3) (\z -> 2*z)) [1,2,3] 为什么？似乎只使用了“
haskell - 理解 (.) 的类型签名
我刚刚使用 Richard Bird 的书学习 Haskell 和函数式编程，并遇到了 (.) 函数的类型签名。即 (.) :: (b -> c) -> (a -> b) -> (a -> c) 和相
scala - 理解 `andThen`
我遇到了andThen ，但没有正确理解它。为了进一步了解它，我阅读了 Function1.andThen文档 def andThen[A](g: (R) ⇒ A): (T1) ⇒ A mm是 Mu
JavaScript .call 理解
这是一个代码，用作 XMLHttpRequest 的 URL 的附加内容。URL 中显示的内容是: http://something/something.aspx?QueryString_from_b
javascript - 理解 Promise.all
考虑以下我从 https://stackoverflow.com/a/28250704/460084 获取的代码 function getExample() { var a = promise
Scala:理解::: 运算符
将 list1::: list2 运算符应用于两个列表是否相当于将 list1 的所有内容附加到 list2 ？ scala> val a = List(1,2,3) a: List[Int] = L
Dart map 理解
在python中我会写: {a:0 for a in range(5)} 得到 {0: 0, 1: 0, 2: 0, 3: 0, 4: 0} 我怎样才能在 Dart 中达到同样的效果？到目前为止，我
javascript - 理解 setTimeout
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
makefile - 理解 Makefile
我有以下 make 文件: CC = gcc CCDEPMODE = depmode=gcc3 CFLAGS = -g -O2 -W -Wall -Wno-unused -Wno-multichar
Haskell 理解 fmap
有人可以帮助或指导我如何理解以下实现中的 fmap 函数吗？ data Rose a = a :> [Rose a] deriving (Eq, Show) instance Functor Rose

首页

博学

6Ren·AI

商城

如何理解margin重叠问题