The Box Model and Positioning

The Box Model

The responsibility of a web browser's rendering engine is to determine the size, properties, and position of rectangular boxes (elements). [MDN article on the box model.]

The box model outlines how these rectangles are sized and positioned.

For a given element, like <p>My paragraph</p>:

Ocassionaly the box model can be tricky when you are trying to give a value to the width property.

Use the box-sizing property to get around that.

The display Property

There are lots of possible values for this property, but the three main ones are:

• inline
• block
• inline-block

inline

inline instructs the browser that the element should flow with the text (and other inline elements) on the page.

<p>It's a <span>trap!</span></p>

Some elements have inline as their default display value:

• <span>
• <img>
• <strong>
• etc.

block

block breaks the normal flow of the text.

<p>"It's a <span>trap!</span>" —Admiral Ackbar</p>

Many elements have block as their default display value:

• <p>
• <li>
• <section>
• etc.

inline-block

inline-block is a hybrid; elements flow with the text of the page, but you can define the width and height for the element.

(inline elements ignore width and height declarations.)

For a great visual explanation of the difference, see this StackOverflow answer.

Tip: If you use inline-block for layout, be aware that since inline and inline-block elements flow like text, sometimes there will be a small space character between them.

See this inline-block example for the trick.

Other Values For display

In the early Web, people used <table> tags to help with complex layouts.

While this "tables for layout" approach is considered bad practice today, one can still style more semantic elements to behave like table cells, rows, etc. using the display property.

You will probably never need to do this, but it's possible.

The position Property

There are four supported values for the position property:

• relative
• absolute
• fixed
• static (the default value for all elements)

relative

relative moves the element, relative to where it would have been had you left it static.

Here is an example of relative positioning:

<p>"It's a <span>trap!</span>" —Admiral Ackbar</p>

absolute

absolute instructs the browser to position the element in absolute terms, using the same four properties as relative.

The element will be positioned in terms of its closest ancestor with positioning context. (visual explanation)

fixed

Affixes an element to a given location, regardless of scroll position.

See the header bar on golucid.co.

The Flexbox Approach

Though not yet fully supported by all browsers, Flexbox is considered by some to be the future of complex layouts in CSS.

Flexbox is a whole CSS module—there are many properties you can configure for the elements on your page to acheive the layout you need.

See some powerful Flexbox examples, courtesy of Daniel Marino.

Or this pretty demo by Leroy Korterink.

I highly recommend A Complete Guide to Flexbox by Chris Coyier to learn more.

CSS Puns FTW!

#titanic {
  float: none;
  bottom: 0;
}
    

.grocery-store .products {
  display: inline;
}
    

.lego,
.minecraft {
  display: block;
}
    

#einstein > * {
  position: relative;
}
    

body.schwarzenegger {
  display: flex;
}