使用display将HTML元素从内联更改为块的真实示例

Question

问题：

有兴趣知道当您需要在内联元素上使用display: block时，HTML/CSS中是否有任何真实的例子。对于相反的顺序，我发现display: inline可以在<nav>中的<li>上用于垂直显示链接。我不想知道内联、块和内联块之间的区别。

当前示例：

当前的示例包括显示如何在<span>元素上使用display: block等等。但这些例子中的许多只说明了display: block的效应，而没有说明它在网站上的实际使用。

问题：

使用display: block将元素从内联级别更改为块级别是出于什么原因以及在网站上的什么位置？

Answer 1

假设您想要显示一个链接到网站的大按钮。使用锚点(<a>(标记是因为它可以包含超链接。

div {
border: 1px solid black;
padding: 20px;
}
.button {
background: orange;
color: white;
padding: 10px;
text-align: center;
}

<div>
This button's on the same line! <a class="button" href="https://example.com">Click me!</a>
</div>

您添加了按钮，但遇到了一个问题：该按钮与所有其他文本位于同一行。它是inline！

添加display: block不仅添加了一条换行符，还可以对按钮的宽度和高度进行更多控制。

div {
border: 1px solid black;
padding: 20px;
}
.button {
display: block;
background: orange;
color: white;
padding: 10px;
text-align: center;
}

<div>
This button's aligned properly. <a class="button" href="https://example.com">Click me!</a>
</div>

如果您想控制按钮的宽度和高度，同时将其保持在同一行，您可以使用inline-block。

进一步阅读