A guide to element display and positioning with the CSS Box Model

Web developers tend to shy away from design & style and focus on the business logic, data structures, messaging, and systems development when dealing with web applications. Without a good grasp on positioning, which is often left to the designer, your websites can look very different between competing browsers, and downright ugly in some. Many native development platforms (XAML, Winforms, etc...) and tools implement the positioning of elements on screen as tables or grids. Tables also have been the de facto way to position DOM elements for a decade. However, with the rise of CSS 2/3, sporting new elements and selectors, positioning is more fluid and flexible.

Page layout with the Box Model and display attribute

Browsers render Web page content using the Box Model, meaning that the display, position, margin, padding, and border attributes, combine to render each element as a box. You can inspect the box model for any element in Internet Explorer by using the IE F12 tools. Below shows part of the IE F12 tools displaying the box model for an element.

Setting the display attribute affects the box model by determining whether or not elements render by their default display style or not - block or inline.

Below is a compare and contrast of block and inline elements:

• Block: Block elements define the structure and layout of the page.
  • Can contain other block or inline elements.
  • Render line breaks both before and after the element.
  • A block element will take up 100% of the width of its container element.
• Inline: Inline elements render inside of block or other inline elements and meant to markup, contain, or style the content, but not define its structure.
  • Can contain other inline elements only.
  • Do not render any line breaks.
  • An inline element will size to match that of the content inside of it.
• Fixed: Fixed elements position relative to browser, and out of the normal flow of the page.

Block elements: <div> <h1>…<h6> <p> <ul> <ol> <table> <form> 

Inline elements: <span> <a> <strong> <em> <img />

Setting the display attribute resets the natural way the element renders to the value of your choosing. In the example below, the #sample element will render as a block element even if its default behavior is inline.

Block and inline elements won't be of much help without the position property to put them in the right place.

Positioning elements in the page

Your choices in positioning with CSS include:

Static: The default, and something you'll probably never use.

Absolute: Absolute positioning is the position of an element in relation to the top:left or 0:0 coordinates of the HTML document.

Relative: Relative positioning is when an element is positioned in relation to its parent or predecessor

Relative + Absolute: This is absolute positioning within a relatively positioned parent.

All elements position from their top and left by default, but you can override this by setting the right or bottom attributes, and the element will position itself from those coordinates instead.

This tutorial sums up positioning nicely. 

Padding and Margins

Padding and margins also play an important role in positioning. Padding is the amount of space between the element edge and the content or children elements inside it, and margins are the space between elements. CSS contains padding and margin settings for top, left, bottom, and right, and you can set any combination of them. Setting too much or too little of either will shift the elements, often far out of line, or overlapping other elements. Below is some CSS that sets padding and margins:

You can use this shortcut syntax to specify one or more of the padding/margin parameters.

An easy way to remember the the order of the values in the shortcut syntax is to use the mnemonic hint TRBL, pronounced "trouble" (very fitting for CSS)  Top, Right, Bottom, Left.

CSS Units of Measurement

Many elements have what appears to be a myriad of options for sizing and placement of content, (e.g., ems, pcts, or points) and this a point of confusion for developers. You can apply different UOMs to any attribute requiring them. The important UOMs to know:

Percent: Units render the attribute according to a percentage you set. Since percentages deal in relatives, a unit of percent in CSS is always relative to its parent element.

Pixels: Pixels have long been the ruling measurement for on-screen displays in programs on both desktops and the Web. Although pixels have their place, they are not as fluid nor flexible as percent and ems.

em: Pronounced "em". 1em is equal to the current font size. This means that 2 em is twice the current font size, while a 1.5em is one and a half times the current size. The default size in browsers set to render medium sized text (which is most), renders 16pt font, so ems weigh against that.

pt: 1 point equals 1/72 inch. Points usually specify font sizes. 

The others:

Although far less frequently seen on the web, these measurements also exist:

• cm/mm: Centimeter and millimeter. This is for you sciency types out there, you might want to display something in exact scale.
• ex: 1 ex is the x-height of a font, or roughly half the font size. Or you could just use an em and it will be easier.
• pc: 1 pica equals 12 points, for those who like to do extra calculations for no reason.
• in: Inches. Seriously? Imperial units are so 19th century.

Regardless of the visual model (See Display and positioning), elements position by their top and left coordinates by default; however, you can position elements from any side you'd like.

The above code sample demonstrates positioning an element from the bottom/left rather than the top/left.

Summary

Knowing the quirks of CSS is important, even when there's a designer on the team, since most web developers render code on the server and send it to the browser, where the browser then renders the content, HTML, client side script, and CSS. Below are five things that will make your life in CSS easier.

Looking for a nice, lightweight, CSS editor? Try WebMatrix: full featured CSS intellisense & tooltips without the overhead of full IDEs (It is what I use for CSS).