Margin

Basic usage

Add margin to a single side

Control the margin on one side of an element using the m{t|r|b|l}-{size} utilities.

For example, mt-6 would add 1.5rem of margin to the top of an element, mr-4 would add 1rem of margin to the right of an element, mb-8 would add 2rem of margin to the bottom of an element, and ml-2 would add 0.5rem of margin to the left of an element.

<div className="**mt-6** ...">mt-6</div>
<div className="**mr-4** ...">mr-4</div>
<div className="**mb-8** ...">mb-8</div>
<div className="**ml-2** ...">ml-2</div>

Add horizontal margin

Control the horizontal margin of an element using the mx-{size} utilities.

<div className="**mx-8** ...">mx-8</div>

Add vertical margin

Control the vertical margin of an element using the my-{size} utilities.

<div className="**my-8** ...">my-8</div>

Add margin to all sides

Control the margin on all sides of an element using the m-{size} utilities.

<div className="**m-8** ...">m-8</div>

Using negative values

To use a negative margin value, prefix the className name with a dash to convert it to a negative value.

<div className="w-36 h-16 bg-sky-400 opacity-20 ..."></div>
<div className="**-mt-8** bg-sky-300 ...">-mt-8</div>