Horizontal Spacing Example

<div class="row text-bold text-sm">
  <div class="col background-info-dark border-xs border-info gap-horizontal-md">
    <button type="button" class="button-sm button-info">Button 1</button>
    <button type="button" class="button-sm button-info">Button 2</button>
    <button type="button" class="button-sm button-info">Button 3</button>
  </div>
</div>

Horizontal Spacing

The gap-horizontal-* classes should not be used to separate WebUI layout columns, CSS grid columns or HTML multi-columns, but are intended for spacing elements within flex items or layout columns.

Horizontal Spacing Classes

The gap-horizontal-* classes can be used to create horizontal spacing between any immediate child elements, with the exception of layout or CSS grid rows and columns. They are ideal for separating form controls such as buttons or creating small gaps between images, but can be used to separate almost any elements.

Vertical Spacing Example

<div class="container gap-vertical-sm">
  <div class="info-dark border-xs border-info pad-md">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>
  <div class="info-dark border-xs border-info pad-md">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>
  <div class="info-dark border-xs border-info pad-md">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>
  <div class="info-dark border-xs border-info pad-md">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>						
</div>

Vertical Spacing

The gap-vertical-* classes should not be used to separate WebUI layout rows or CSS grid rows, but are intended for spacing elements within flex items or layout columns.

Vertical Spacing Classes

The gap-vertical-* classes can be used to create vertical spacing between any immediate child elements, with the exception of layout or CSS grid rows and columns. They are ideal for separating form controls such as buttons or creating small gaps between images, but can be used for almost any elements.

Row Spacing Example

<div class="container info-dark border-xs border-info pad-md">
  <div class="kite-clip-shape width-sm-md height-sm-md background-info align-center"></div>
  <div class="row-spacing-lg"></div>
  <p>Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.</p>
</div>

Row Spacing Utility

NOTE: Using a row spacing utility element is a better choice than relying on margins for spacing in most cases. Issues can occur with overlapping or collapsing margins if margins are used on elements inside the normal document flow.

Row Spacing Classes

The row-spacing-* classes are used to apply spacing between elements with the exception of layout or CSS grid rows and columns. They can be used to create a vertical spacer element with a preset height, and can be inserted between most other elements. They provide a way to create ad-hoc spacing.

Margin Example

<div class="container background-info-dark height-lg-xl text-sm border-xs border-info">
  <div class="place-top-right margin-top-xs margin-right-sm pad-sm info">
    <div>place-top-right margin-top-xs margin-right-sm</div>
  </div>
  <div class="place-middle-left margin-left-sm pad-sm info">
    <div>place-middle-left margin-left-sm</div>
  </div>
</div>

Margin Classes

WebUI includes a number of utility classes that can be used to assist with element margins, as listed below. These classes can be used on their own or in combination with the place-* or dock-* classes. Margins used for adjusting elements should be used sparingly, with preferance given to padding instead.

Using Margins

Margins used for adjusting elements should be used sparingly, with preferance given to padding instead. Where possible, try to use gap-* or pad-*utility classes instead. Margins are relatively predictable when used with elements using absolute positioning, as in the example above.