Bulma List of all spacing helpers

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

list of spacing helper classes that can be utilized to modify the size and color of the text for one or multiple viewport widths, which in turn helps to align & organize the content on the web pages. For adding spacing in the form of margins and padding (from the top, left, bottom, right, or horizontally/vertically), Bulma provides 112 spacing helpers classes. Margins can be added using m classes like m-4, my-3, mx-6, mt-3, mb-1, mr-2, ml-4, m-auto and Padding can be added using p-4, py-3, px-6, pt-3, pb-1, pr-2, pl-4, and p-auto. The values of classes can include from 0 to 6, like mt-3, mb-6, or p-5, pr-1, & so on.

Bulma List of Spacing helpers Classes:

• m-*: This class is used to add margin from all four sides.
• mt-*: This class is used to add margin from the top.
• ml-*: This class is used to add a margin from the left.
• mb-*: This class is used to add margin from the bottom.
• mr-*: This class is used to add margin from the right.
• mx-*: This class is used to add margin from both left and right
• my-*: This class is used to add a margin from both top and bottom.
• p-*: This class is used to add padding from all four sides.
• pr-*: This class is used to add padding from the right.
• pb-*: This class is used to add padding from the bottom.
• pl-*: This class is used to add padding from the left.
• pt-*: This class is used to add padding from the top.
• px-*: This class is used to add a margin from both left and right.
• py-*: This class is used to add a margin from both top and bottom.

Syntax:

<p class="Spacing-helpers-Classes">
 ...
</p>

Example 1: The below example illustrates the list of spacing helpers in a Bulma.

Output:

👁 Bulma List of all spacing helpers

Example 2: This example illustrates the list of spacing helpers in an <img>tag and <span> tag.

Output:

👁 Bulma List of all spacing helpers

Reference: https://bulma.io/documentation/helpers/spacing-helpers/#list-of-all-spacing-helpers