` element with no predefined styles applied to it. ```jsx With GitHub Copilot, you’re always in charge. ``` ### Uniform padding Use `padding` to apply equal inner spacing to all sides of an element. ```jsx <> condensed normal spacious 24 32 48 64 96 ``` ### Directional padding Apply internal spacing to a specific side. Directional padding is implemented with CSS logical properties and accepts functional spacing names, or values from the base scale. ```jsx block start inline end block end inline start ``` ### Uniform margin Use `margin` to apply equal outer spacing to all sides of an element. ```jsx <> condensed normal spacious 24 32 48 64 96 ``` ### Directional margin Apply external spacing to a specific side. Directional margins are implemented with CSS logical properties and accepts functional spacing names, or values from the base scale. ```jsx block start inline end block end inline start ``` ### Responsive spacing All padding and margin options can be configured for indivisual viewports: Each viewport entry is applied using a `min-width` media query. ```jsx margin padding ``` ### Border radius ```jsx small medium large full ``` ### Borders ```jsx thin thick thicker ``` ### Background colors ```jsx default subtle inset overlay Custom ``` ## Component props ### Box | Name | Type | Default | Description | | :----------------------- | :----------------------- | :---------: | :-------------------------------------------------------------------------- | | `padding` | `BoxSpacingValues` | `undefined` | Adds padding to all internal sides of the Box. | | `paddingBlockStart` | `BoxSpacingValues` | `undefined` | Adds padding to the internal block start (top) side of the Box. | | `paddingRight` | `BoxSpacingValues` | `undefined` | Adds padding to the internal inline end (right) of the Box. | | `paddingBlockEnd` | `BoxSpacingValues` | `undefined` | Adds padding to the internal block end (bottom) side of the Box. | | `paddingLeft` | `BoxSpacingValues` | `undefined` | Adds padding to the internal inline start (left) side of the Box. | | `margin` | `BoxSpacingValues` | `undefined` | Adds margin to all external sides of the Box. | | `marginBlockStart` | `BoxSpacingValues` | `undefined` | Adds margin to the external block start (top) side of the Box. | | `marginInlineEnd` | `BoxSpacingValues` | `undefined` | Adds margin to the external inline end (right) side of the Box. | | `marginBlockEnd` | `BoxSpacingValues` | `undefined` | Adds margin to the external block end (bottom) side of the Box. | | `marginInlineStart` | `BoxSpacingValues` | `undefined` | Adds margin to the external inline start (left) side of the Box. | | `backgroundColor` | | `undefined` | Applies a system-level background color to the Box. | | `borderRadius` | `BoxBorderRadiusOptions` | `undefined` | Applies a system-level border radius value to the Box. | | `borderWidth` | `BoxBorderWidthOptions` | `undefined` | Applies a system-level border width value to the Box. | | `borderBlockStartWidth` | `BoxBorderWidthOptions` | `undefined` | Applies a system-level border width value to block-start side of the Box. | | `borderInlineEndWidth` | `BoxBorderWidthOptions` | `undefined` | Applies a system-level border width value to inline-end side of the Box. | | `borderBlockEndWidth` | `BoxBorderWidthOptions` | `undefined` | Applies a system-level border width value to block-end side of the Box. | | `borderInlineStartWidth` | `BoxBorderWidthOptions` | `undefined` | Applies a system-level border width value to inline-start side of the Box. | | `borderColor` | `BoxBorderColorOptions` | `undefined` | Applies a system-level border color value to the Box. | | `borderStyle` | | `undefined` | Applies border style. Values correspond to the CSS `border-style` property. |