Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

CSS - Width Specifications on Inline and Block Level Elements

Last Update: 4.27.2009

Observe the span and div below, where I've used inline styling to specify 200 pixels as the width of each.

Spans are inline elements.
Divs are block elements.
style="border: dashed grey 1px; width: 200px; margin: 2px;"

The width specification only works on the block element (the div), not the inline element (the span). If you have an inline element, such as a link, that should include a width declaration, you must also convert it to a block level element.

Super duper really fantastically extra-long.
style="display: block; width: 200px; border: dashed grey 1px; margin: 2px;"

If you're working with a simple horizontal list, you cannot also specify a fixed width for the inline elements.

If the elements should all be of the same width, it's common to float block level elements, instead of turning them into inline elements.

Looking for more?

Back to Pew Pew Laser Articles

Contact Me