Search code examples
cssbackgroundblockoverlap

Why is display:block necessary when there is a image background?

The logo display well with the code below,

but I don't know How the code display:block works here?

I know if I don't use the code the text will overlap the image(the logo), but I don't understand, why is display:block can solve this?

The HTML:

<h1><a href="#">WebsiteName</a></h1>

The CSS:

#header h1 a {
background: url(images/logo.jpg) no-repeat;
height: 21px;
width: 197px;
display: block;/* How this works? */
text-indent: -9999px;
}
Solution

  • By default, the <a> element is an inline element. Inline elements can't have a set width or height.

    By adding display: block;, you make the element block-level, which lets you set its size.