CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Spacing

Use shorthand margin and padding utility classes to control spacing between elements.

Notation#

Spacing utility classes can be defined using the format -{property}{sides}[-{breakpoint}]--{size}.

{property}#

  • m - use to apply margin
  • p - use to apply padding

{sides}#

  • t - use to apply margin-top or padding-top
  • b - use to apply margin-bottom or padding-bottom
  • l - use to apply margin-left or padding-left
  • r - use to apply margin-right or padding-right
  • x - use to apply margin-left and margin-right or padding-left and padding-right
  • y - use to apply margin-top and margin-bottom or padding-top and padding-bottom
  • blank - leave blank to apply margin or padding to all 4 sides.

{breakpoint}#

Optionally, include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile-first library, any applying to smaller breakpoints will also modify larger ones unless another class overrides this behaviour.

  • blank - leave blank to apply margin or padding to all breakpoints.
  • sm - use to apply margin or padding to sm and larger breakpoints.
  • md - use to apply margin or padding to md and larger breakpoints.
  • lg - use to apply margin or padding to lg and larger breakpoints.
  • xl - use to apply margin or padding to xl breakpoints.

{size}#

  • 0 - use to eliminate existing margin or padding and set to 0
  • 1 - use to set margin or padding to $base-unit
  • 2 - use to set margin or padding to $base-unit * 2
  • 3 - use to set margin or padding to $base-unit * 3
  • 4 - use to set margin or padding to $base-unit * 4
  • 5 - use to set margin or padding to $base-unit * 5
  • 6 - use to set margin or padding to $base-unit * 6
  • 7 - use to set margin or padding to $base-unit * 7
  • 8 - use to set margin or padding to $base-unit * 8
  • 9 - use to set margin or padding to $base-unit * 9
  • 10 - use to set margin or padding to $base-unit * 10
  • auto - use to set margin to auto value

Examples#