Inline versus Block Elements (special guest: float)

Filed in Code , Dev talk 3 comments

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 advantages of inline-block are:
- possibility to align inline-block aligned elements vertically (top, bottom, middle etc.);
- does not require clear, as how float does, leaving the following elements to behave normally;
- injects block-level behavior to the selected elements, thus allowing easy visual manipulation via CSS.

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:

<ul class="menu">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

CSS:

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:

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.

Posted by Catalin   @   20 May 2014 3 comments

Share This Post

RSS Digg Twitter StumbleUpon Delicious Technorati

3 Comments

Comments
Sep 7, 2012
4:06 PM
#1 Corey :

I’ve tried the code and it looks the way it’s supposed to, except in Safari and Chrome. Any thoughts?

Author Sep 13, 2012
5:26 PM
#2 Catalin :

@Corey
See the update in the article and the extra note I’ve added, that oughta fix things :)

Dec 20, 2012
5:52 PM

Great refresher of CSS display properties.

Leave a Comment

Previous Post
«
Next Post
Luix designed by Video Game Music In conjunction with VPS Hosting , Website Hosting and Shared Hosting.