就换行符而言，内联块与内联元素(Inline-block vs inline elements in terms of line-breaks)

 在一个段落的父元素内部，有文本和一对锚链接。 这些锚链接的显示设置为inline-block ，可视化结果如下所示： https ： //imgur.com/a/aLR3Q 
 
 现在，如果我要将显示更改为内联，则结果如下所示： https ： //imgur.com/a/TFof9 
 
 我的问题是，为什么要将锚点的显示设置为inline-block而不是inline导致这种情况，让我们只说“软线中断”？ 因为我认为就断线而言，两个显示器都以相同的方式运行，并且根本不会中断。 
 
 Codepen链接代码： https ：//codepen.io/Kestvir/pen/zpvmYV 
 
 父元素的代码： 
 
.footer__copyright {
    border-top: 1px solid #777;
    padding-top: 2rem;
    width: 80%;
    float: right;
}
 
 锚的代码： 
 
footer__link:link, .footer__link:visited {
    color: #f7f7f7;
    background-color: #333;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: all .2s;
}
 
 锚点是： 
 
<a href="#" class="footer__link">Jonas Schmedtmann</a>
 
 和 
 
<a href="#" class="footer__link">Advanced CSS and Sass</a>

Inside of a parent element which is a paragraph, there is text and a couple of anchor links. These anchor links have their display set to inline-block and the visual result looks like this: https://imgur.com/a/aLR3Q
 
Now if I would change the display to inline, the result looks like this: https://imgur.com/a/TFof9
 
My question is, why does having the display of the anchors set to inline-block instead of just inline cause this, let's just say "soft line break" ? Because I thought that in terms of line-breaks, both of the displays act in the same way, and don't break at all. 
 
Codepen link for the code: https://codepen.io/Kestvir/pen/zpvmYV
 
The code for the parent element: 
 
.footer__copyright {
    border-top: 1px solid #777;
    padding-top: 2rem;
    width: 80%;
    float: right;
}
 
The code for the anchors: 
 
footer__link:link, .footer__link:visited {
    color: #f7f7f7;
    background-color: #333;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: all .2s;
}
 
The anchors are: 
 
<a href="#" class="footer__link">Jonas Schmedtmann</a>
 
and
 
<a href="#" class="footer__link">Advanced CSS and Sass</a>

原文：https://stackoverflow.com/questions/47850953