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"

Examples

Inline-block

css3 mixin for inline-block

Imports

1. Shared Utilities

Configurable Variables help

$inline-block-alignment middle

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.

Mixins

inline-block($alignment)

=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;
  }
}