Gaps

Another new family of classes is ipsGap. These classes are used when you want spacing between elements. In the past, you'd have to use :last-child or :first-child to exclude an element, or loop over the elements in the template to leave off a class. If elements wrapped to a new line, putting spacing between the lines was tricky too.

ipsGap solves this by applying even spacing between elements, then applying a negative margin on the whole container to bring it back to the starting position.

The classname is followed by a modifier, which is a number from our spacing scale, e.g. 1 is 4px spacing, 2 is 8px spacing and so on.

• ipsGap:1 (1-5 available) - applies both horizontal and vertical spacing around each element in the container
• ipsGap_row:1 (1-5 available, as well as 0 to remove) - applies vertical spacing on each element in the container

Notice ipsGap_row also supports the :0 modifier. This allows you to have horizontal-only spacing - simply apply ipsGap:1 ipsGap_row:0.

Be aware that using both ipsMargin (or custom styles that apply a margin) and ipsGap on the same element can cause issues. You may want add a wrapper element to handle your margin in this situation.