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"

View the Source for this module on Github.

Examples

Inline-block

css3 mixin for inline-block

Imports

The following sass files are automatically imported when you import this file:

1. CSS3 Utilities

Mixins

inline-block

=inline-block
  @if $legacy-support-for-ie
    &
      *display: inline
  display: -moz-inline-box
  -moz-box-orient: vertical
  display: inline-block
  vertical-align: middle
  @if $legacy-support-for-ie
    *vertical-align: auto

@mixin inline-block {
  @if $legacy-support-for-ie {
    & {
      *display: inline; } }
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  @if $legacy-support-for-ie {
    *vertical-align: auto; } }