Margins and Padding

Spacing is a crucial part of having a good user interface. We use margin and padding properties to incorporate spacing between and inside elements.Margins and padding are implemented using the .m and .p classes, respectively.

We can adjust the spacing of margins and padding using the classes .m-* and .p-*. The * refers to a number from 0 to 5. The spacing provided by those values is:

• 0: 0

• 1: .25rem

• 2: .5rem

• 3: 1rem

• 4: 1.5rem

• 5: 3rem

Let’s take a look at the code implementation below.