Why there are a gap between two DIV which margin are 0

Asked Feb 10 '20 at 13:56

Active Feb 10 '20 at 14:01

Viewed 47 times

I have a very easy HTML like below:

<!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>

I suppose the big DIV is 500px and each child DIV is 20%, so all the DIV should be in one line, However, when Chrome display, the fifth DIV is in the second line. Would anyone know why?

edited Feb 10 '20 at 14:01

Aleksandr Belugin

2,149
1
13
19

asked Feb 10 '20 at 13:56

JoseLuis

2

Does this answer your question? [How do I remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements) – Aleksandr Belugin Feb 10 '20 at 14:02
2

I would use flexbox. – epascarello Feb 10 '20 at 14:02
It's not necessary to use flexbox for this at all. @epascarello – Rob Feb 10 '20 at 14:06
@Rob you have one opinion and I have another. – epascarello Feb 10 '20 at 14:07
@epascarello It's not a matter of opinion. We've been "fixing" such things for years, long before flex ever came out. – Rob Feb 10 '20 at 14:08

Why there are a gap between two DIV which margin are 0

0 Answers0