why do CSS designer use display:block?

Question

I have following code to place an image as an anchor, this is the skeleton code:

<html>
    <div id="outer"> 
    <div id="facebookButton">
    <a href="url"></a>
    </div>
    </div>
</html>

in the CSS:

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

what is purpose of the display property setting to block here? what are the benefits?

Possible duplicate of [What is the difference between display: inline and display: inline-block?](http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) — TylerH, Oct 06 '15 at 01:54

Racil Hilan · Accepted Answer · 2015-10-06T01:59:56.430

display property controls how the element is displayed on the page. It has several values, but the most commonly used ones are:

inline Displays an element as an inline (like <span>).
block Displays an element as a block element (like <div>).
none Hides the element.

In your case, <a> is an inline element, so it's displayed among the text surrounding it:

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

But by changing its display property to block, it will be displayed like a div (a block that is separated from the text surrounding it) and you can control its height and width:

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

why do CSS designer use display:block?

1 Answers1