应用错误收集

我有一个非常简单的HTML，如下所示：

<!DOCTYPE html>
<html>

<head>
  <style>
    div.framework {
      position: relative;
      width: 500px;
      height: 500px;
      border: 0;
      padding: 0px;
      margin: 0px;
    }
    
    div.outside1 {
      position: relative;
      width: 20%;
      height: 30px;
      border: 0px;
      display: inline-block;
      margin: 0px;
    }
  </style>
</head>

<body>
  <div class="framework">
    <div class="outside1">DIV1</div>
    <div class="outside1">DIV2</div>
    <div class="outside1">DIV3</div>
    <div class="outside1">DIV4</div>
    <div class="outside1">DIV5</div>
  </div>
</body>

</html>

我假设大的DIV是500px，每个孩子DIV是20%，所以所有的DIV应该在同一行，但是，当显示Chrome时，第五个DIV在第二行。谁知道为什么吗？

为什么两个DIV之间有一个空白，其边距为0

0 个答案: