CODEWITHSUNDEEP
htmlcss
Michael Samuel
Michael Samuel

Reputation: 3920

Is is valid to declare an inline element as block?

I passed a style sheet with the following to the W3C validator and it passed:

a {
  display: block;
}

So want to make sure, is it valid markup to use an inline element as a block one? I know it will work but is it valid?

Thanks

Upvotes: 4

Views: 232

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The style sheet is valid, in the sense that it conforms to the CSS specifications. This is a purely formal thing. In CSS, the selector a has no special meaning, it is just an identifier; CSS has no information about the meaning of a in HTML, such as being an inline element, and the style sheet could in fact be used to style an XML document, where a means something completely different.

HTML validity, on the other hand, does not depend on CSS at all. It is a formal thing about markup, and style sheets aren’t markup.

Whether it is “valid” in some other, informal sense (like “good practice” or “useful” or “conforming to a style guide”) is a different issue, and a debate issue rather than a technical question. Anyway, it is common usage to set display: block on an a element to make it possible to set its dimensions the way we can do for blocks (e.g., to make a link fill a table cell).

Upvotes: 0

j08691
j08691

Reputation: 207901

Yes, it's completely valid. And useful too.

One small note (since the above answer is very short), this method of styling normally inline elements as block elements is quite common. For example, when creating a horizontal navigation menu from a list, you'll often see <a> elements styled with display:block in order for the links to be able to take up the full width and height of the parent list item.

Upvotes: 5

xShirase
xShirase

Reputation: 12399

Yes it's valid but also you can use inline-block to use an inline element while keeping the block properties.

Upvotes: 3

Jace
Jace

Reputation: 3072

Yes, it is valid.

There are elements, as you know, that are inline or block by default. But it is completely valid to then go and override this in CSS.

Upvotes: 2

tckmn
tckmn

Reputation: 59283

Yes, it is valid. However, if you really don't want to do that, you could wrap the a in a div. That would be useless though, because it is completely valid; that's why the display attribute is there.

Upvotes: 1

Related Questions