Inline versus Block Elements (special guest: float)

In HTML, there are two types of elements, inline and block elements.
Most know about them, use them, but do not fully grasp their difference and behavior and thus, stumble upon numerous layout rendering issues.

To use CSS at its best, you need to understand this very basic concept of HTML element construction.

Block

Block-level elements force a new line before and after them and take up the entire width of the page. It is why setting up a background to a heading element, despite its length, the background will stretch to the entire width of the page. It is also why they stand out on a new line each time and do not align horizontally with other elements.

Block-level elements can contain inline elements, as well as other block elements.

Examples of block element: DIV P UL LI H1 H2 H3 etc.

Inline

Inline elements do not force new lines and take up the width they need, relative to their content and they are children of a block-level element.
They do not take width and height properties as they are dependent of their parent element and force their width and height relative to their contained data.

Inline elements can contain only data and other inline elements.

Examples of inline elements: I B EM SPAN etc.

The CSS Display property

With CSS, we can change the display and behavior of an element to block, inline or inline-block.
Obvious enough what you can perform with the inline and block values, and that is to set an inline element to block and vice-versa.
We do however, have a third setting and that is inline-block, and as it sounds, it is what you expect, a
combination of both.
Inline-block sets an element to block, but it doesn’t force a width of 100%, thus allowing all inline-block
elements to align horizontally with each other (usually used to create menus and other horizontally aligned
elements).

Inline-block vs Float

The float property is often used for layout purposes and aligning major block-level containers. It is also used a lot for horizontal menus, where inline-block would be more suitable.

The inline-block setting is known to have some compatibility issues and lack of support on IE, probably why some prefer to avoid it in their day-to-day solutions. There are fixes for that! Today, we still need fixes

In-between space

The space inline-block elements have, are caused by the White Space that’s found in the mark-up, if you’d remove the White Space (i.e. <ul><li>item 1</li><li>item 2></li></ul>), you no longer see that blank space, that’s all it is, a white space.
Removing that White Space via mark-up is not really a solution, think of how a programmer would succeed in doing that when looping an LI element, the White Space would be inevitable.
To resolve this, set the letter-spacing and word-spacing property to -4px on the parent element and set them back to normal on the elements that have inline-block applied.

Example:

HTML:

XHTML

1

2

3

4

5

6

7

<ul class="menu">

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ul>

CSS:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

ul.menu {

letter-spacing:-4px;

word-spacing:-4px;

}

ul.menu li {

display:inline-block;

letter-spacing:normal;

word-spacing:normal;

}

What this does is remove the White Space completely (which targets the white-space between the inline-block elements) and sets it back to normal to the containing data (the text).

Note that this is font-size dependent! Adjust it as needed on a case-by-case basis, larger font-sizes might require a value more than -4px (-5px, -6px and so on).

Inline-block not recognized on IE7 and below.

IE7 does know of inline-block, however, when using this property, you need to trigger hasLayout. If you do not know what hasLayout is, I’d suggest you google about it, hasLayout explanations are not intended for this article.

To resolve this for IE7 and IE6:

CSS:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

ul.menu {

letter-spacing:-4px;

word-spacing:-4px;

}

ul.menu li {

display:inline-block;

letter-spacing:normal;

word-spacing:normal;

zoom:1;

*display:inline;

}

zoom is a property recognized by IE and when setting it to 1, it does nothing, but it triggers hasLayout.
*display (display with a star at the beginning) is recognized only by IE7 and IE6, the reason for using this is

that IE6 and IE7 with hasLayout see inline-block as block elements, *display: inline ‘adds’ the inline capability, resulting in a behavior almost identical to inline-block elements.

Post Views: 4,945

Share this:

My name is Cătălin Berța and I'm a front-end web developer.
I was born in Focsani, Romania and currently living in Bucharest.
Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :)
I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.