Clone: Margin & Padding

Using Margins & Padding

These attributes allow you to control the amount of margin space or padding at a granular level. They support a similar shorthand to CSS where you supply the side and the value you want.

Markup

<div data-c-margin="SIDE(VALUE)"></div>

<div data-c-padding="SIDE(VALUE)"></div>

Available Arguments

# SIDE

all
top
right
bottom
left
tb (Top and Bottom)
rl (Right and Left)

# VALUE

.25
.5
1
2
3
4

In Practice

<!--A double value margin on all sides.-->
<div data-c-margin="all(2)"></div>

<!--Double value on top, normal on the sides, and triple value on the bottom.-->
<div data-c-padding="top(2) right(1) bottom(3) left(1)"></div>

Changelog

Version 2.4.10

Began deprecation of word-based values to represent space in favor of numeric values.
- quarter -> .25
- half -> .5
- normal -> 1
- double -> 2
- triple -> 3
- Also introduces 4.

Version 2.3.15

Adds support for auto to data-c-margin="tb" and data-c-margin="rl".

Version 2.3.4

Adds top/bottom, left/right shortcuts for margins and padding (data-c-margin="tb(double)").
Removes display: block from data-c-margin/padding
- This required updates to accordion and dialog subtitles (span -> p).