0

How can I remove the little space between my two horizontal space here. I have tried margin: 0px; and padding: 0px; on the container, but it is not working.

Any help is appreciated!

<html>
<head>
 <title>IOTA Vs. Debt</title>
 <style>
  body {
   margin: 0;
   padding: 0;
  }
  #container {
   width: 100%;
   height: 500px;
   background-color: green;
   display: inline-block;
   margin: 0;
   padding: 0;
  }

  #first {
   width: 20%;
   height: 50px;
   display: inline-block;
   background-color: red;
  }
  #second {
   width: 20%;
   height: 50px;
   display: inline-block;
   background-color: yellow;
  }
 </style>
</head>
<body>
 <div id="container">
  <div id="first">
  </div>
  <div id="second">
  </div>
 </div>
</body>
</html>
Zip
  • 5,372
  • 9
  • 28
  • 39

1 Answers1

0

Using inline-block will give you around 4px spacing between them. You need to give margin -4px to fix it.

Thus, better to use float:left on them.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231