Differencebetween Block and Inline-Block with Width: 100%

What is the difference between block and inline-block with width: 100%?

What you said is pretty much correct: "an inline-block element seems to be able to do anything a block element can do, but with a little extra styling." This is mostly due to the fact that the one thing both have in common is the fact that they are both block containers.

However, there's a catch.

A block box participates in a block formatting context, and an inline-block participates in an inline formatting context (although it establishes a block formatting context for its descendants, just like a block box does under certain conditions). See section 9.4. Basically, this means an inline-block is treated as though it were text, which in turn means most properties that usually apply to text would also apply to an inline-block. These properties include text-indent, text-align and vertical-align, among others.

This can cause undesired side effects which you can easily prevent by not using display: inline-block in the first place. See this question for an interesting example of what can happen.

The box model for inline-blocks also differs somewhat from that of block boxes. Section 10 contains all the nitty gritty details, but the main differences are:

• Without the width: 100% declaration, as you may have suspected, an inline-block will shrink to fit its contents.

• Because an inline-block flows inline, you can't center it with auto left and right margins. You use text-align: center instead. It goes without saying that it must then be on its own line with no text surrounding it on the same line, but if you're setting width: 100% then this won't be a problem.

• Inline-blocks are never affected by margin collapse.

If you're trying to create a block-based layout, you should be using display: block. Generally speaking, when deciding between the two, you should always default to display: block, and only choose display: inline-block if you have a very good reason to (and no, blocking margin collapse is not what I would consider a good reason).

DIV inline-block + width 100%

The problem with your current attempt is the width: 100%; on the third column div#c. 100% here will be 100% of its parent - which contains all three columns. Depending on what level of flexibility you want you have a few options.

If the site width is fixed, set a fixed width for the third column.

If you want the third column to stretch to its content, set max-width.

If you want the third column to stretch to fill its parent, you're probably better off with (css) tables.

Check out http://somacss.com/cols.html for a great resource on css column layout.

Why does inline-block and max-width not work together?

The max-width property doesn't imply any specific width. Instead, it limits the possible values of the width property.

Setting display to inline-block implies no specific width, but block (which is the default for <div> elements) implies 100% width.

To answer your question, max-width and inline-block do work together.

If your goal is to prevent the element from growing beyond the browser width, you want max-width: 100%.

---

Related Topics