Question

我的html文档中有六个div。

我的问题是最后一个div有一些顶部空间需要删除。

这不是一个重复的问题。

这与内联块间距无关。

请帮忙。

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

Answer 1

你的css只是一个小小的变化：

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

Answer 2

这是inline-block的问题。使用vertical-align: top进行修复，默认为baseline：

＆＃13;

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

＆＃13;

Answer 3

添加到正文font-size: 0;并添加到您的div

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

关于 Box Sizing

演示

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

Answer 4

您可以尝试绝对定位。将position: absolute;添加到div:first-child

＆＃13;

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

＆＃13;

Answer 5

在html中，空格，制表和换行符（在格式化html文档时）由空格转录。

因此，如果你的div之间没有空格，你应该在它们之间添加注释：

  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>

如何在没有空间的情况下定位div

5 个答案: