为什么CSS设计师使用display：block？

Question

我有以下代码将图像作为锚点，这是骨架代码：

    #facebookButton a{
    width:20px;
    height:20px;
    display:block;
/*place code to load image*/
    }

CSS中的

：

display

此处{{1}}属性设置的目的是什么？阻止？有什么好处？

Answer 1

display属性控制元素在页面上的显示方式。它有几个值，但最常用的是：

• 内嵌将内容显示为内嵌（例如<span>）。
• 阻止将元素显示为块元素（如<div>）。
• 无隐藏元素。

在您的情况下，<a>是一个内联元素，因此它显示在它周围的文本中：

<p>This is <a href="" style="border: 1px solid blue;">a link</a> within text.</p>

但是，通过将其display属性更改为block，它将显示为div（与其周围的文本分开的块），您可以控制其高度和宽度：

<p>This is <a href="" style="display: block; border: 1px solid blue; width: 100px; height: 50px;">a link</a> within text.</p>