Spacing

Use margin and padding utilities to quickly control the layout of elements. The @margin and @padding attributes enable standard Bootstrap spacing across a range of DITA components.

Margin

The @margin attribute controls the distance between elements, supporting values from 0 to 5 and auto.

Margin 0

Margin 1

Margin 2

Margin 3

Margin 4

Margin 5

Margin Auto

<div color="primary" margin="0" padding="2">Margin 0</div>
<div color="secondary" margin="1" padding="2">Margin 1</div>
<div color="success" margin="2" padding="2">Margin 2</div>
<div color="danger" margin="3" padding="2">Margin 3</div>
<div color="warning" margin="4" padding="2">Margin 4</div>
<div color="info" margin="5" padding="2">Margin 5</div>
<div color="light" margin="auto" padding="2" width="50">Margin Auto</div>

<div outputclass="text-bg-primary m-0 p-2">Margin 0</div>
<div outputclass="text-bg-secondary m-1 p-2">Margin 1</div>
<div outputclass="text-bg-success m-2 p-2">Margin 2</div>
<div outputclass="text-bg-danger m-3 p-2">Margin 3</div>
<div outputclass="text-bg-warning m-4 p-2">Margin 4</div>
<div outputclass="text-bg-info m-5 p-2">Margin 5</div>
<div outputclass="text-bg-light m-auto p-2 w-50">Margin Auto</div>

Padding

The @padding attribute controls the internal spacing of an element, supporting values from 0 to 5.

Padding 0

Padding 1

Padding 2

Padding 3

Padding 4

Padding 5

<div color="primary" padding="0">Padding 0</div>
<div color="secondary" padding="1" margin="1">Padding 1</div>
<div color="success" padding="2" margin="1">Padding 2</div>
<div color="danger" padding="3" margin="1">Padding 3</div>
<div color="warning" padding="4" margin="1">Padding 4</div>
<div color="info" padding="5" margin="1">Padding 5</div>

<div outputclass="text-bg-primary p-0">Padding 0</div>
<div outputclass="text-bg-secondary p-1 m-1">Padding 1</div>
<div outputclass="text-bg-success p-2 m-1">Padding 2</div>
<div outputclass="text-bg-danger p-3 m-1">Padding 3</div>
<div outputclass="text-bg-warning p-4 m-1">Padding 4</div>
<div outputclass="text-bg-info p-5 m-1">Padding 5</div>