我不知道为什么我的div之间有空格

Question

我正在做一个有4个不同列(Div)的页脚。这4个divs都在一个容器中。我将这些divs的宽度设置为25%，所以它们应该都可以放在同一条“线”中，但事实并非如此，我给每个divs添加了不同的div，以查看额外的空格来自哪里，我发现在div之间有一个空格，既不是边距也不是填充。我在Stackoverflow上查找了一下，我认为我找到了一个解决方案，但是将父元素的font-size设置为0，然后重置子元素的font-size并不起作用……

​

footer {
background-color: #000;
color: #BFBFBF;
padding: 60px;
}

.footer-container {
    width: 85%;
    background-color: red;
}

.footer-col {
    display: inline-block;
    width: 25%;
}

.fc-1 {
    background-color: orange;
}

.fc-2 {
    background-color: green;
}

.fc-3 {
    background-color: blue;
}

.fc-4 {
    background-color: yellow;
}

footer a {
    color: #BFBFBF;
    transition: none;
    display: block;
}

footer a:hover {
    color: #BFBFBF;
}

<footer>

    <div class="footer-container">

        <div class="footer-col fc-1">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-2">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-3">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-4">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

    </div>

</footer>

​

Answer 1

删除所有空格：

​

footer {
  background-color: #000;
  color: #BFBFBF;
  padding: 60px;
}

.footer-container {
  width: 85%;
  background-color: red;
}

.footer-col {
  display: inline-block;
  width: 25%;
}

.fc-1 {
  background-color: orange;
}

.fc-2 {
  background-color: green;
}

.fc-3 {
  background-color: blue;
}

.fc-4 {
  background-color: yellow;
}

footer a {
  color: #BFBFBF;
  transition: none;
  display: block;
}

footer a:hover {
  color: #BFBFBF;
}

<footer>
  <div class="footer-container">
    <div class="footer-col fc-1">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div><div class="footer-col fc-2">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div><div class="footer-col fc-3">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div><div class="footer-col fc-4">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div>
  </div>
</footer>

​

Answer 2

所以我建议在你的容器上使用Flexbox is a useful technique to position elements来解决这个问题，你也可以删除容器中所有的空格，will prevent the spacing from appearing

​

.footer-container {
    display: flex;
    width: 85%;
    background-color: red;
}

.footer-col {
    display: inline-block;
    width: 25%;
}

.fc-1 {
    background-color: orange;
}

.fc-2 {
    background-color: green;
}

.fc-3 {
    background-color: blue;
}

.fc-4 {
    background-color: yellow;
}

footer a {
    color: #BFBFBF;
    transition: none;
    display: block;
    word-wrap: break-word;
}

footer a:hover {
    color: #BFBFBF;
}

<footer>
    <div class="footer-container">
        <div class="footer-col fc-1">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
        <div class="footer-col fc-2">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
        <div class="footer-col fc-3">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
        <div class="footer-col fc-4">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
    </div>
</footer>

​

Answer 3

通过使用flex-box，您将能够使用flex-basis: 25%; flex-grow: 0;而不是width: 25%;来解决此问题

​

footer {
background-color: #000;
color: #BFBFBF;
padding: 60px;
}

.footer-container {
    width: 85%;
    display: flex;
    background-color: red;
}

.footer-col {
    display: inline-block;
    flex-basis: 25%;
flex-grow: 0;
}

.fc-1 {
    background-color: orange;
}

.fc-2 {
    background-color: green;
}

.fc-3 {
    background-color: blue;
}

.fc-4 {
    background-color: yellow;
}

footer a {
    color: #BFBFBF;
    transition: none;
    display: block;
}

footer a:hover {
    color: #BFBFBF;
}

<footer>

    <div class="footer-container">

        <div class="footer-col fc-1">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-2">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-3">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-4">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

    </div>

</footer>

​