ComboStrap Styling - Spacing (Margin, Padding)

Undraw My Documents

About

spacing is the definition of the margin and padding between block component

Spacing Margin Padding

where:

If you want to add space between lines, used the text component and its line-spacing attribute

Example

Padding and Spacing on all sides

A note with:

<note spacing="p-3 m-5">
A note with a padding and a margin
</note>

A note with a padding and a margin

Padding and Spacing on the start side

The start side is:

A note with:

  • ps-3 means:
    • p: a padding (painted in blue)
    • s: at the start of the line (ie left in english)
    • -3: with a scale value of 3
  • ms-5 means:
    • m: a margin (no color - transparent)
    • s: at the start of the line (ie left in english)
    • -5 with a scale value of 5
<note spacing="ps-3 ms-5">
A note with a padding and a margin only at the start of the line (ie ''left'' in english) - not at the right
</note>

A note with a padding and a margin only at the start of the line (ie left in english) - not at the right

Syntax

<component spacing="value" />

where value is:

{spaceType}[sides]-{size}

where:

  • spaceType (mandatory) is the type of space
    • p for padding
    • m for margin
  • sides (optional default to all sides) is
    • axis:
      • x (Left and right)
      • y (top & bottom)
    • position:
      • s: start (left for LTR or right for RTL language)
      • e: end (right for LTR or left for RTL language)
      • t: top
      • b: bottom
  • size (mandatory) is 0,1,2,3,4 or 5 (based on size scale)

This value may be conditioned to the screen size by adding a breakpoint as prefix

Example: a padding of 3 applied from a medium screen size

<component spacing="p-3-md" />

Support

Bootstrap 4 Notation Preserved

The l and r for left and right of Bootstrap 4 are translated to start and end

<note spacing="pl-3 ml-5">
The old notation ''l'' and ''r'' are still supported therefore ''pl-3 ml-5'' is equivalent to  ''ps-3 ms-5''
</note>

The old notation l and r are still supported therefore pl-3 ml-5 is equivalent to ps-3 ms-5




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Undraw My Documents
ComboStrap - Font Size Typographic Attribute

How to set the font-size with the font-size attribute
Undraw My Documents
ComboStrap - Line Spacing (Line height)

The line spacing attribute lets you set the space between each line in a paragraph
Undraw My Documents
ComboStrap - Text component - Apply text typographic effects

The text component lets you apply text typographic effects on one ore more paragraph.
Rem Strap Conf
ComboStrap Styling - Length Scale (Size Scale)

Every length are scaled based on what's called the remrem (Root Emphemeral Unit) which is equal by default to 16px. This scale is used for font size and spacing (component spacing and line spacing) The...
Undraw Website Builder Re Ii6e
ComboStrap UI - Box

A box is a component that permits to contain other components. This is useful to: define the elements that should collapse or create a styled box. layout componenttext component Align Background-Color...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Undraw Website Builder Re Ii6e
ComboStrap UI - HR (Horizontal Rule)

The hr component permits to delimit two sections of content by drawing a horizontal rule (hr). It's also known sometime as the Divider and has a separator role. It represents: a paragraph-level thematic...
Undraw Website Builder Re Ii6e
ComboStrap UI - Jumbotron

A jumbotron is a default Hero unit that emphase prominently its content. buttonleadtexthorizontal rule A jumbotron is a hero unit style content with a medium value by default where: the Hero...
Undraw My Documents
ComboStrap UI - Note

note is a ComboStrap UI component that shows a text that is parenthetic or ancillary to the main text. where: title is a title type may have one of the following value: (Default) ...



Task Runner