Margins for basic column control

This page outlines the use of margins on the basic Column Control component.

Default

The default version is without "full width" or "no spacing" selected.

Default, margin-all

Default, margin-left-right

Default, margin-left

Using margin-left will have no effect on the Column Control component unless "full width" is selected.

Default, margin-right

Using margin-right will have no effect on the Column Control component unless "full width" is selected.

Default, margin-top-bottom

Default, margin-top

Default, margin-bottom

Full width

Full width, margin-all

Full-width, margin-left-right

Full-width, margin-left

Full-width, margin-right

Full-width, margin-top-bottom

Full-width, margin-top

Full-width, margin-bottom

No spacing

No spacing, margin-all

No spacing, margin-left-right

No spacing, margin-left

Using margin-left will have no effect on the Column Control component when "no spacing" is selected.

No spacing, margin-right

Using margin-right will have no effect on the Column Control component when "no spacing" is selected.

No spacing, margin-top-bottom

No spacing, margin-top

No spacing, margin-bottom

No spacing, full width

No spacing, full width, margin-all

No spacing, full width, margin-left-right

No spacing, full width, margin-left

No spacing, full width, margin-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.