Source on Github

Compass Inline Block

Provides a cross-browser method to implement display: inline-block;. Note that this was actually introduced in CSS2, but badly implemented across browsers. See CSS2.1 spec: display.

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

This file can be imported using: @import "compass/css3/inline-block"


css3 mixin for inline-block


  1. Shared Utilities

Configurable Variables help


Set $inline-block-alignment to none or false to disable the output of a vertical-align property in the inline-block mixin. Or set it to a legal value for vertical-align to change the default.


view source

=inline-block($alignment: $inline-block-alignment)
  @if $legacy-support-for-mozilla
    display: -moz-inline-stack
  display: inline-block
  @if $alignment and $alignment != none
    vertical-align: $alignment
  @if $legacy-support-for-ie
    *vertical-align: auto
    zoom: 1
    *display: inline
@mixin inline-block($alignment: $inline-block-alignment) {
  @if $legacy-support-for-mozilla {
    display: -moz-inline-stack;
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment;
  @if $legacy-support-for-ie {
    *vertical-align: auto;
    zoom: 1;
    *display: inline;

Provides a cross-browser method to implement display: inline-block;