Implied Block

Avatar of Chris Coyier
Chris Coyier on

Jeff Starr tweeted a simple tip the other day:

If you’re floating an inline element, it’s treated as block, so no need to include “display: block;” in your stylesheet.

Indeed that is exactly what happens. The spec:

The values of this property have the following meanings. Left: The element generates a block box…[actual stuff about how floats work]

Browsers implement it just that way. Here’s a LOLCSS screenshot to make things clear:

What this does mean is that you can use width and height properties and the element will respect them. What it doesn’t mean is that the element will automatically stretch to the width of its parent as non-floated block elements do. Its width and height will be either what you set it as, or if you don’t set it, stretch to fit whatever content you put inside it.

It works this exact same way for absolutely positioned elements.