| Firefox position:absolute element has scroll bar margin-bottom invalidation | chrome is OK | - Codes Helper

| Firefox position:absolute element has scroll bar margin-bottom invalidation | chrome is OK |

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      position: absolute;
      top: 100px;
      left: 100px;
      width: 1000px;
      height: 1000px;
      background: -sharpccc;
      margin-bottom: 200px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Browser html css

Mar.14,2021

after observation, we can find that margin still exists, but it is invalid. There is a hole in margin. The margin of the child element will be passed outside the parent element. Guess that Google browser and Firefox browser deal with the outermost elements in different ways

Previous: Use vue+axios post request to send formData report 500 for advice

Next: I want to use Vue to display user information in the upper right corner of the navigation bar after a successful login.