CODEWITHSUNDEEP
htmlcss
Yagami
Yagami

Reputation: 339

CSS3 display as block

Okay, I accidentally make my display for the unordered list, rather for the <li> into block style, like the following:

li{
  display: block;
}

And I realize, that my bullet was hidden as I input that style, so I don't need to add list-style, as the following:

li{
  display: block;
  list-style: none;
}

But, the question is : What is the result of displaying as block? Because I think, by default the <li> and most of the HTML tags is displaying as block, so in the first place, I do agree that whether I add "display: block" or not, It doesn't make any sense, except for the new giving tags for HTML5, such as, <nav> <header>, <footer>, etc, which I know for sure it's neccesary for the earlier browser. Thanks in advance.

Upvotes: 0

Views: 45

Answers (1)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174977

For the same reason you might want an li to be display: inline, you may want an a (which is an inline element), to be display: block.

Quick example:

a {
  display: block;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed red;
}
<a href="#">I'm big!</a>

Note how the larger area is clickable, you wouldn't be able to set width and height on an inline, so display: block (or display: inline-block) works nicely for this purpose.

Upvotes: 1

Related Questions