为什么这些盒子的间距如此html / css

Question

我有这个网页我正在创建，我希望底部有这三个框。在背景图像和盒子之间有一个奇怪的空间，我希望它只有15px的空间，但无论我改变什么，它仍然会这样做。

＆＃13;

＆＃13;

#Textboxes {
      width: 1280px;
      height: 600px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
    }

#Textboxes div {
      list-style: none;
      display: inline;
      width:427px;
      height:600px;
    }

.Text-sub ul {
      display: inline-block;
      background-color: #3f3f3f;
      list-style: none;
      width: 378px;
      height: 600px;
      margin-left: 5px;
      opacity: 0.7;
      filter: alpha(opacity=70);
      margin-top: 10px;
    }

.Text-sub ul:hover {
      background-color: #696969;
      transition: all 0.6s;
      opacity: 100;
      filter: alpha(opacity=0)
    }

.Text-sub ul li h2 {
      text-align: center;
    }

.Text-sub ul li h3 {
      text-align: center;
    }

.Text-sub ul li h4 {
      text-align: center;
    }
.Text-sub ul li a {
      color: black;
    }
.Text-sub ul li p {
      padding-right: 30px;
    }

＆＃13;

 
            <div id="Textboxes">
            <div class="Text-sub">
                <ul id="info">
                    <li>
                        <h2>Information Example</h2>
                    </li>
                    <li>
                        <p>This is where information about the company will go.</p>
                    </li>
                </ul>
            </div>
            <div class="Text-sub">
                <ul id="FAQ">
                    <li>
                        <h3>FAQ Example</h3>
                    </li>
                    <li>
                        <p>This is where Frequently asked questions will go</p>
                    </li>
                </ul>
            </div>
            <div class="Text-sub">
                <ul id="More">
                    <li>
                        <h4>More</h4>
                    </li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Store Locator</a></li>
                    <li><a href="#">Social Media</a></li>
                </ul>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为内联元素的默认vertical alignment是基线。您可能希望获得.Text-sub ul元素的顶部：

#Textboxes {
  width: 1280px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}
#Textboxes div {
  list-style: none;
  display: inline;
  width: 427px;
  height: 600px;
}
.Text-sub ul {
  display: inline-block;
  background-color: #3f3f3f;
  list-style: none;
  width: 378px;
  height: 600px;
  margin-left: 5px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  margin-top: 10px;
    vertical-align:top;

}
.Text-sub ul:hover {
  background-color: #696969;
  transition: all 0.6s;
  opacity: 100;
  filter: alpha(opacity=0)
}
.Text-sub ul li h2 {
  text-align: center;
}
.Text-sub ul li h3 {
  text-align: center;
}
.Text-sub ul li h4 {
  text-align: center;
}
.Text-sub ul li a {
  color: black;
}
.Text-sub ul li p {
  padding-right: 30px;
}

<div id="Textboxes">
  <div class="Text-sub">
    <ul id="info">
      <li>
        <h2>Information Example</h2>
      </li>
      <li>
        <p>This is where information about the company will go.</p>
      </li>
    </ul>
  </div>
  <div class="Text-sub">
    <ul id="FAQ">
      <li>
        <h3>FAQ Example</h3>
      </li>
      <li>
        <p>This is where Frequently asked questions will go</p>
      </li>
    </ul>
  </div>
  <div class="Text-sub">
    <ul id="More">
      <li>
        <h4>More</h4>
      </li>
      <li><a href="#">Privacy</a>
      </li>
      <li><a href="#">Terms of Use</a>
      </li>
      <li><a href="#">Store Locator</a>
      </li>
      <li><a href="#">Social Media</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

这只是因为内容和inline-block。默认情况下，inline-block与baseline对齐。将修复程序提供给显示的元素inline-block：

vertical-align: top;

它应该显示得很好。

#Textboxes {
  width: 1280px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}
#Textboxes div {
  list-style: none;
  display: inline;
  width: 427px;
  height: 600px;
}
.Text-sub ul {
  display: inline-block;
  background-color: #3f3f3f;
  list-style: none;
  width: 378px;
  height: 600px;
  margin-left: 5px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  margin-top: 10px;
  vertical-align: top;
}
.Text-sub ul:hover {
  background-color: #696969;
  transition: all 0.6s;
  opacity: 100;
  filter: alpha(opacity=0)
}
.Text-sub ul li h2 {
  text-align: center;
}
.Text-sub ul li h3 {
  text-align: center;
}
.Text-sub ul li h4 {
  text-align: center;
}
.Text-sub ul li a {
  color: black;
}
.Text-sub ul li p {
  padding-right: 30px;
}

<div id="Textboxes">
  <div class="Text-sub">
    <ul id="info">
      <li><h2>Information Example</h2></li>
      <li><p>This is where information about the company will go.</p></li>
    </ul>
  </div>
  <div class="Text-sub">
    <ul id="FAQ">
      <li><h3>FAQ Example</h3></li>
      <li><p>This is where Frequently asked questions will go</p></li>
    </ul>
  </div>
  <div class="Text-sub">
    <ul id="More">
      <li><h4>More</h4></li>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms of Use</a></li>
      <li><a href="#">Store Locator</a></li>
      <li><a href="#">Social Media</a></li>
    </ul>
  </div>
</div>

预览