javascript - How to position div without space

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>

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>

Share Improve this question edited Jul 18, 2016 at 11:02 asked Jul 18, 2016 at 9:47 srikanth_k 2,9273 gold badges17 silver badges18 bronze badges

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 How to Ask page for help clarifying this question. – Praveen Kumar Purushothaman Commented Jul 18, 2016 at 9:49
Added fiddle.Please check that. I dont want top space to be there for my last div – srikanth_k Commented Jul 18, 2016 at 9:51
Remove inline-block and add float: left. If you have whitespaces in your html inline-block will add some space. – Huelfe Commented Jul 18, 2016 at 9:52
float:left and vertical-align:top adding both worked.but which one should be prefered.Please explain. – srikanth_k Commented Jul 18, 2016 at 9:58
1 Don't use float: left for this case. If you are using float: left, you need to clear as well. – Praveen Kumar Purushothaman Commented Jul 18, 2016 at 9:59

| Show 6 more ments

5 Answers 5

Sorted by: Reset to default 4

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>

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 */
}

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>

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>

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to position div without space - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)