Really Important CSS Concepts

This guide will only be useful if you also inspect the HTML markup and styles.

Background Image

Background images can do so many things! However, if the image is semantically really critical to the content of the page, it is better to use an <img> tag.

CSS Transition

I'm a CSS Transition!

Inline, Block & Inline-Block

display:inline

Inline elements can have border, padding, margin, width, and height properties. However, the parent element will ignore the child elements' width, vertical padding, and margin in the layout. Also notice what happens when you have a small mobile layout (shrink your browser). This is usually not desireable.

A good reason to use display:inline list items might be for a short, minimally styled list of links:

display:block

Block elements can have border, padding, margin, width, and height properties. The parent element will retain the child elements' vertical padding and margin in the layout. Elements with display:block are 100% width, unless a width is set.

A good reason to use display:block list items would be for a vertical menu of things, or possibly a modular layout (described later).

display:inline-block

Inline-Block elements can have border, padding, margin, width, and height properties. The parent element will retain the vertical padding and margin of the child elements in the layout. Elements with display:inline-block are the width of their content, unless the width property is set.

A good reason to use display:inline list items might be for a styled horizontal nav or possibly a modular layout (described later).

Example of list items with no width (width:auto):

Example of list items with a % width:

Example of list items with a fixed pixel width:

These three lists of links don't seem different until you do one of the following: hover over an item, drop to a mobile size and see what happens, or inspect the CSS:

Quirk #1

With inline and inline-block items, there is a small gap between items. No matter what you do, you cannot get rid of it...

...unless you do something hacky like this. (Inspect Element)

Quirk #2

With inline-block items, the alignment gets funky if each item is a different height.

...and if you give it a set height property, this just happens:

...unless you set a vertical-align property...

...or vertical-align and height properties.

Benefits of inline-block

Using the inline-block display property for group of items, there are 3 nice things that happen with your items. If your boxes are all the same height...

  1. your items can have an automatic width
  2. when the items fills up the entire horizontal space, overflowing items all start lining up below automatically
  3. if the parent element has the property text-align:center, the elements that drop down are centered

Multi-Column Layouts

"Traditional" Multi-Column Layouts follow one of these structures. With the new-fangled flexbox property, this method will soon die. For now, multi-column layouts have start off more or less with one of the following structures.

Multi-Column Layouts with the float property

The structure for a 2-column float-based layout contains:

Start with plain 'ol divs:

left

right

Then add the float and width properties. If your inner divs have some padding, margin, or borders, this might happen:

left

right

So you need to add the box-sizing:border-box property to the floating items:

left

right

Except the outer container lost it's height! So you need the apply the .clearfix class to the outer item in your HTML markup:

left

right

This method also works for more than 2 columns. (In this example, everything is floating left).

one

two

three

Even more columns!

one

two

three

four

five

Multi-Column Layouts with the inline-block property

The structure for a 2-column inline-block-based layout contains:

Start with plain 'ol divs:

left

right

Then give the inner containers the property display:inline-block and % widths.

left

right

You need to apply the really dumb hack (see HTML) to remove the spaces between the inner divs

left

right

Apply box-sizing:border-box to the inner containers.

left

right