html - 就换行而言，内联 block 与内联元素

Question

在作为段落的父元素内部，有文本和几个 anchor 链接。这些 anchor 链接将它们的显示设置为 inline-block 并且视觉结果如下所示: https://imgur.com/a/aLR3Q

现在，如果我将显示更改为内嵌，结果如下所示: https://imgur.com/a/TFof9

我的问题是，为什么将 anchor 的显示设置为 inline-block 而不是 inline 会导致这种情况，我们只说“软换行”？因为我认为就换行而言，两个显示器的行为相同，根本不会断。

代码的 Codepen 链接:https://codepen.io/Kestvir/pen/zpvmYV

父元素的代码:

.footer__copyright {
    border-top: 1px solid #777;
    padding-top: 2rem;
    width: 80%;
    float: right;
}

anchor 代码:

footer__link:link, .footer__link:visited {
    color: #f7f7f7;
    background-color: #333;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: all .2s;
}

anchor 是:

<a href="#" class="footer__link">Jonas Schmedtmann</a>

和

<a href="#" class="footer__link">Advanced CSS and Sass</a>

Answer 1

换行的发生是因为内联 block 不能像普通的内联元素那样被分割成多行。它只是一个完整的内嵌显示的“ block 单元”。如果整个单元放不下，那么它将全部换行到下一行。