Div with 'display: inline-block' are producing margins in between them even after margin=0 and padding=0

Question

I want to place two Div so that they both can cover whole body width. But, while writing the code provided below, a space is taking place between both Div. Why is it so? How to get rid off the space created between two Div'(s).

body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      width: 100%;
      background-color: red;
    }
    
    .container {
      display: block;
      width: 100%;
      height: 100vh;
      margin: auto;
      margin-bottom: 0;
      padding: 0;
      background-color: rgba(73, 73, 73, 0.603);
      box-sizing: border-box;
    }
    
    #subcontainer1 {
      display: inline-block;
      margin: 0;
      padding: 0;
      height: 99vh;
      width: 25%;
      background-color: antiquewhite;
      box-sizing: border-box;
    }
    
    #subcontainer2 {
      display: inline-block;
      margin: 0;
      padding: 0;
      height: 99vh;
      width: 74%;
      box-sizing: border-box;
      background-color: white;
    }

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

<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>
</head>

<body>
  <div class="container">
    <div id="subcontainer1"></div>
    <div id="subcontainer2"></div>
  </div>
</body>

</html>

Imran Rafiq Rather · Answer 1 · 2021-07-20T19:54:47.700

If you use display:flex; on the container, there wouldn't be any gaps.

.container {
  display: flex;
  width: 100%;
  height: 100vh;
  margin: auto;
  margin-bottom: 0;
  padding: 0;
  background-color: rgba(73, 73, 73, 0.603);
  box-sizing: border-box;
}

And then you also do not need display:inline-block; seperately on the child elements.

The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear).

To understand it better,and find possible number of solution, just go through this article from CSS-tricks Inline-block Issue

The one you can try however is: (In case you do not want to go with a flex-box solution):

.container {
  font-size: 0;
}
.container div {
  font-size: 16px;
}

score 0 · Answer 2 · answered Jul 20 '21 at 19:48

Inline elements are sensitive to the white space in your code. Simply remove it:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  background-color: red;
}

.container {
  display: block;
  width: 100%;
  height: 100vh;
  margin: auto;
  margin-bottom: 0;
  padding: 0;
  background-color: rgba(73, 73, 73, 0.603);
  box-sizing: border-box;
}

#subcontainer1 {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 99vh;
  width: 25%;
  background-color: antiquewhite;
  box-sizing: border-box;
}

#subcontainer2 {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 99vh;
  width: 74%;
  box-sizing: border-box;
  background-color: white;
}

<div class="container">
  <div id="subcontainer1"></div><div id="subcontainer2"></div>
</div>

score 0 · Answer 3 · answered Jul 20 '21 at 19:53

You could do something like this instead. It's a simpler approach to achieve what you want.

*{margin:0!important;padding:0!important;}
.grid-container {
  display: grid;
  grid-template-columns: 25% 75%;
  padding: 10px;
  height:99vh;
}

<body style="background-color:red">
<div class="grid-container">
  <div class="grid-item" style="background-color:antiquewhite"></div>
  <div class="grid-item" style="background-color:white"></div>
</div>
</body>

Div with '*display: inline-block*' are producing margins in between them even after margin=0 and padding=0

3 Answers3

Div with 'display: inline-block' are producing margins in between them even after margin=0 and padding=0