影響元素之間的間距是可以通過style的margin或padding屬性來實現，但這兩個屬性本意並不相同；margin影響的是本元素與相鄰外界元素之間的距離，這里簡稱外邊距；padding影響的元素本身與其內部子元素之間的距離，簡稱為內填充。
bootstrap4提供了簡寫的class名，名稱分別以m-開頭和p-開頭的類。
一、影響距離大小的值有
0,1,2,3,4,5,auto
(1)、margin值有
class名
等價的style
m-0
等價於{margin:0 !important}
m-1
等價於{margin:0.25rem !important}
m-2
等價於{margin:0.5rem !important}
m-3
等價於{margin:1rem !important}
m-4
等價於{margin:1.5rem !important}
m-5
等價於{margin:3rem !important}
m-auto
等價於{margin:auto !important}
(2)、padding值有
class名
等價的style
p-0
等價於{padding:0 !important}
p-1
等價於{padding:0.25rem !important}
p-2
等價於{padding:0.5rem !important}
p-3
等價於{padding:1rem !important}
p-4
等價於{padding:1.5rem !important}
p-5
等價於{padding:3rem !important}
p-auto
等價於{padding:auto !important}
二、調整某一側的邊距
有幾個縮寫,t,b,l,r,x,y含義分別是top,bottom,left,right,left和right,top和bottom
（1）、margin例子，距離大小可以0-5與auto,這里只用期中一個值來說明含義
class名
等價的style
mt-2
{margin-top: 0.5rem !important}
mb-2
{margin-bottom: 0.5rem !important}
ml-2
{margin-left: 0.5rem !important}
mr-2
{margin-right: 0.5rem !important}
mx-2
{margin-right: 0.5rem !important;margin-left: 0.5rem !important}
my-2
{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}
(2)padding例子
class名
等價的style
pt-2
{padding-top: 0.5rem !important}
pb-2
{padding-bottom: 0.5rem !important}
pl-2
{padding-left: 0.5rem !important}
pr-2
{padding-right: 0.5rem !important}
px-2
{padding-right: 0.5rem !important;margin-left: 0.5rem !important}
py-2
{padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}
---------------------
作者：王建野
來源：CSDN
原文：https://blog.csdn.net/jianye5461/article/details/79463014
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！