Looking for the lessons? Get started!
Information on block and inline elements.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
[E]very element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. — Chris Coyier
There are two kinds of elements in HTML: block and inline. The difference is, as Tommy Olsson writes, “mainly semantic and grammatical.” But I think we can decrypt Tommy’s description to provide a more colloquial understanding.
I’m going to start by quoting a long but excellent metaphor from Ian Lloyd (emphasis mine):
I’ve moved house recently. When was the last time you moved? It’s amazing how much stuff we seem to amass, especially those little trinkets that collect dust on the mantelpiece. You have to find some small boxes to put these bits and pieces in so they don’t get damaged, and of course you then need some larger packing boxes into which you can put those smaller boxes. So on the day before the move – possibly earlier if you’re more organized than I am – you start to place your trinkets into small boxes (here’s a tip: shoe boxes work well). You then place those shoe boxes into bigger boxes, along with some books and those video tapes of the X-Files that you know you’ll never watch but can’t bring yourself to throw away. This process continues through the night, and eventually (usually about three minutes before the moving truck is due to arrive) all of your stuff is finally packed and ready to go (whew!). If you think of the different types of boxes as block-level elements, and your other stuff – the books, videos and trinkets – as inline elements, you’ll start to understand the difference between the element types.
Two differences I have with Ian on this: one, my wife insists on having us packed days before we are to move, and two, I fully intend to watch some of my X-Files videotapes again someday.
Block-Level Elements
Block-level elements act as "containers" for other elements. In other words, you put other elements inside block elements. Lloyd again:
A block-level element can contain other block-level elements, as well as inline elements.
Here’s an incomplete list of block elements, courtesy of Olsson and HTML Help:
- blockquote
- div
- heading (i.e.
h1) - p
- ul
- ol
- form
- table
Some block-level elements, such as p, can only contain text and inline elements. Others, such as form, can contain only block-level elements (in HTML Strict coding, at least). And some, like the ubiquitous div, can contain text, inline, and block-level elements.
Unless you override the browser’s default styling, block-level elements such as p and div have an implicit line break both before and after, making it impossible to have two block-level elements side by side on the same page. (CSS commands can override this.)
Sizing the Blocks
By default, a block-level element expands to a width of 100% of its parent container, whether it be the entire body element, a container element such as a div, or something else. It will also expand by default to whatever height it needs to have. But remember – “default” means “I can change it.” So let’s see how we can change the default width and height of a block-level element.
(In doing this, we’re moving towards learning how to create layouts for our pages. Are you excited yet?
You can see this by looking at this very text. This text that you’re reading right now is contained inside a block-level element – a p – that, except for imposed padding, stretches to take up the entire center column of this page. However, the light gray and dark gray boxes (in p, ul, and pre block-level elements respectively) have their widths constrained to, I believe, 95%. That prevents them from ramming up against the right-hand border of the center column.
Let’s give an example.
Say you want to “punch up” a particular paragraph, to get the attention of your readers. You create a “punchup” class:
.punchup {
width: 50%;
padding: 5px;
font-weight: bold;
color: #ff0000;
font-size: 1.25em;
background-color: #ffe4e1;
}
Any paragraph with the .punchup class will be constrained to 50% of the width of its parent container, has some padding, will be in bold, will be bright red, will be 25% larger than the other text, and has a light pink background to make it stand out that much further.
<p class="punchup">This text is guaranteed to snag the attention of all your readers. Woo-hoo!</p>
It looks like this:
This text is guaranteed to snag the attention of all your readers. Woo-hoo!
With all the fancy text formatting used in that class, the width constraint may make the biggest impact, as it sets that text apart from the surrounding text.
We could add height to the code also:
height: 250px;
giving us:
This text is guaranteed to snag the attention of all your readers. Woo-hoo!
Notice that the element is significantly elongated vertically, and is flush against the left side of the container (minus padding). We could increase the height even more, and use this structure to develop a vertical "sidebar" for a page, maybe containing a navigation scheme or other such info. And we will, a bit later on.
You can also add borders to block-level elements, further defining the blocked-out space. Insider tip: Not only do borders often look good in a final design, many designers use a 1px black border around all of their elements during the design process, to help them keep track of how their block-level elements are positioned on the page. They remove the borders before you and I see the final product.
The Box Model
We’re learning the rudiments of what Web designers call "the box model" — using block-level elements with margins, padding, height, and width values to construct "boxes" in which to contain our material. See the links below for more information.
More about margins and padding.
More about positioning elements.
Inline Elements
Inline elements function "inline" within text. Lloyd writes:
An inline element can only contain other inline elements. ... It’s perfectly okay to nest one inline element inside another. ... [However, i]nline elements can never contain block-level elements.
Inline elements can have borders, margins and padding, just as block-level elements do, though some browsers choke on them. Inline elements cannot have widths or heights.
Again relying on Olsson and HTML Help, here’s a partial and (very) incomplete list of the most popular inline elements in HTML:
- a (the anchor element)
- cite
- em
- img
- span
- strong
Inline elements do not contain block-level elements (with one exception, the object element, which we won’t get into here). Inline elements have no implied line breaks.
Some designers believe that they can transform an inline element with the CSS display: block declaration. This does not work; i.e. you cannot put a h1 element inside a a href link. Let’s let Olsson explain this one:
HTML has block-level and inline elements. CSS has block and inline boxes (plus a few others). These are very different things. The distinction in HTML has to do with semantics and syntax, while the distinction in CSS has to do with rendering and presentation. By default, block-level elements generate block boxes, and inline elements generate inline boxes (this is a grossly simplified explanation, but is generally true). The display property can change the type of the generated box, but CSS cannot change the grammatical or syntactical rules of HTML.
Note: One of the most important, and often overlooked, characteristics of the img element is that it is an inline element and not a block-level element. It must be contained within a block-level element, usually a div or a p:
<p>Some text.</p>
<img src="images/picture.jpg> This is WRONG.
<p>Some more text.</p>
This leaves the inline img element stranded, with nothing to contain it.
<p>Some text.</p>
<p><img src="images/picture.jpg><p> This is RIGHT.
<p>Some more text.</p>
This places the inline img element inside a block container, all safe and snug.
It’s also worth noting, as Web developer Kilian Valkhof reminds us, that inline elements always take their width and height from the contents, ignoring dimensions specified in the CSS, with one exception: Internet Explorer allows it. IE is, of course, wrong, but some designers try (incorrectly) for just such styling, and complain that &ldquoIE does it right and the other browsers don’t!” Nope.
Other Values
There are other values besides block and inline. Some of them have virtually no browser support, but at least one of them comes in handy every now and then. Here’s a quick rundown:
Inline-Block
Using display: inline-block; allows the cited element to remain in the flow of the document, but allows it to be styled like a block element, giving us the ability to add margins and padding.
Tommy Olsson and Paul O’Brien define inline-block as follows:
inline-blockmakes the element generate a block box that’s laid out as if it were an inline box.
And designer Robert Nyman gives a more practical definition:
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.
Web designer Louis Lazaris writes that the most common use of inline-block is to get Internet Explorer 6’s margins to cooperate with your design. He also gives a nifty visual illustration, which I will let you go to his site to view.
Lazaris writes:
[I]f you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled. You could fix this with an IE6 hack with a margin setting that’s half the value of the original, or you could (in many cases) give the element’s display property a value of
inline-block(again in an IE6-only hack or stylesheet). This will resolve the issue in most, if not all circumstances.
Lazaris notes four common uses of inline-block:
- to fix the IE6 double-margin bug on floated elements;
- to place multiple block-like elements on the same horizontal line without floating them;
- to allow an inline element to have width and/or height while still remaining inline; and
- to allow an inline element to have padding or margins
Some things to remember: inline-block is, for some reason, "white-space dependent":
so if your HTML has white spaces (i.e. random spacebar spacing or tabs) in it, you won’t see it in your code, but you will see it, perhaps distressingly, in your browser rendering of your document. And IE6 and IE7 don’t correctly handle elements defined with inline-block unless the element has a layout defined (the maddening hasLayout issue). Lazaris discusses these in more depth, along with some other issues affecting inline-block, in his article.
List-Item
Works in all browsers, even IE6. Using this essentially creates two "boxes" in a list item, one with a block setting and the second (the "marker box") where the list bullet would go.
Run-In
As of now, this value only works in Opera, so don’t bother. Web developer Kilian Valkhof takes a valiant stab at explaining it, though even he admits the description is "awfully confusing." Since we can’t use it, let’s move on.
Compact
This doesn’t work properly in any browser, and only improperly in Safari, Opera, and Konqueror, so let’s move past this one, shall we?
Table
Since IE6 and 7 do not support the subordinate properties that go with this value, most designers don’t use it, either. Essentially, this allows you, if your browser allows, to emulate a table while using other CSS elements.
