html - 为什么这些框的间距像这样 html/css

Question

我正在创建这个网页，我希望底部有这三个框。背景图像和方框之间有一个奇怪的空间，我希望只有 15px 的空间，但无论我如何更改，它仍然如此。

#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;
    }

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

因为默认vertical alignment内联元素是基线。您可能想要 top 用于您的 .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>