How to position div without space

Question

I have six divs in my html document.

My problem is that last div has some top space which needs to be removed.

This is not a duplicate question.

This has nothing to do with inline-block spacing.

Please help.

<!DOCTYPE html>
<html>
<style>
  body {
    border: 1px solid;
    padding: 0;
    margin: auto;
    height: 500px;
    width: 500px;
  }
  div {
    padding: 0;
    margin: 0;
    border: 1px solid;
    display: inline-block;
    width: 25%;
    height: 25%;
    position: relative;
  }
  div:first-child {
    background: black;
  }
</style>

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>
  </div>
  <div>
    <div></div>
  </div>
  <script>
    var myDivs = document.querySelectorAll("div");
    myDivs[2].style.backgroundColor = "blue";
  </script>
</body>

</html>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the [ask] page for help clarifying this question. — Praveen Kumar Purushothaman, Jul 18 '16 at 09:49
Added fiddle.Please check that. I dont want top space to be there for my last div — srikanth_k, Jul 18 '16 at 09:51
Remove `inline-block` and add `float: left`. If you have whitespaces in your html `inline-block` will add some space. — Huelfe, Jul 18 '16 at 09:52
float:left and vertical-align:top adding both worked.but which one should be prefered.Please explain. — srikanth_k, Jul 18 '16 at 09:58
Don't use `float: left` for this case. If you are using `float: left`, you need to `clear` as well. — Praveen Kumar Purushothaman, Jul 18 '16 at 09:59
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — gcampbell, Jul 18 '16 at 10:03
@PraveenKumar "All divs should align properly without any spaces between them"? — gcampbell, Jul 18 '16 at 10:14
@gcampbell True. Not a right dupe target. Let me repeat, not a right dupe target. `:)` — Praveen Kumar Purushothaman, Jul 18 '16 at 10:15
Use text-align or vertical-align (can't remember which off the top of my head) — TylerH, Jul 18 '16 at 13:51

score 4 · Accepted Answer · answered Jul 18 '16 at 09:52

This is a problem with inline-block. Use vertical-align: top to fix, as the default is baseline:

<!DOCTYPE html>
<html>
<style>
  body {
    border: 1px solid;
    padding: 0;
    margin: auto;
    height: 500px;
    width: 500px;
  }
  div {
    padding: 0;
    margin: 0;
    border: 1px solid;
    display: inline-block;
    width: 25%;
    height: 25%;
    position: relative;
    vertical-align: top;   /* This is the fix */
  }
  div:first-child {
    background: black;
  }
</style>

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>
  </div>
  <div>
    <div></div>
  </div>
  <script>
    var myDivs = document.querySelectorAll("div");
    myDivs[2].style.backgroundColor = "blue";
  </script>
</body>

</html>

score 3 · Answer 2 · answered Jul 18 '16 at 09:52

3

Just a small change in your css:

div {
padding: 0;
margin: 0;
border: 1px solid;
display: inline-block; /* Removed this */
width: 25%;
height: 25%;
position: relative;
float:left; /* Added this */
}

answered Jul 18 '16 at 09:52

Pranjal

1,088
1
7
18

Rohit Azad Malik · Answer 3 · 2016-07-18T09:53:58.607

add to body font-size: 0; and add to your div

font-size: 12px;
    box-sizing: border-box;
    vertical-align: top;

about Box Sizing

Demo

<!DOCTYPE html>
<html>
<style>
  body {
    border: 1px solid;
    padding: 0;
    margin: auto;
    height: 500px;
    width: 500px;
font-size: 0;
  }
  div {
    padding: 0;
    margin: 0;
    border: 1px solid;
    display: inline-block;
    width: 25%;
    height: 25%;
    position: relative;
font-size: 12px;
box-sizing: border-box;
vertical-align: top;
  }
  div:first-child {
    background: black;
  }
</style>

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>
  </div>
  <div>
    <div></div>
  </div>
  <script>
    var myDivs = document.querySelectorAll("div");
    myDivs[2].style.backgroundColor = "blue";
  </script>
</body>

</html>

score 0 · Answer 4 · answered Jul 18 '16 at 09:55

You can try absolute positioning. Add position: absolute; to div:first-child

<!DOCTYPE html>
<html>
<style>
  body {
    border: 1px solid;
    padding: 0;
    margin: auto;
    height: 500px;
    width: 500px;
  }
  div {
    padding: 0;
    margin: 0;
    border: 1px solid;
    display: inline-block;
    width: 25%;
    height: 25%;
    position: relative;
  }
  div:first-child {
    position: absolute;
    background: black;
  }
</style>

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>
    <div></div>
  </div>
  <script>
    var myDivs = document.querySelectorAll("div");
    myDivs[2].style.backgroundColor = "blue";
  </script>
</body>

</html>

score 0 · Answer 5 · answered Jul 18 '16 at 10:13

In html, spaces, tabulations and linebreak (while formatting your html document) are transcribe by a space.

So if you want no space between your div you should put comments between them :

  body {
    border: 1px solid;
    padding: 0;
    margin: auto;
    height: 500px;
    width: 500px;
  }
  div {
    padding: 0;
    margin: 0;
    border: 1px solid;
    display: inline-block;
    width: 25%;
    height: 25%;
    position: relative;
  }
  div:first-child {
    background: black;
  }

<!DOCTYPE html>
<html>

<body>
  <div></div><!--
  --><div></div><!--
  --><div></div><!--
  --><div></div><!--
  --><div>
  </div><!--
  --><div>
    <div></div>
  </div>
  <script>
    var myDivs = document.querySelectorAll("div");
    myDivs[2].style.backgroundColor = "blue";
  </script>
</body>

</html>

How to position div without space

5 Answers5