Bootstrap5 调整元素之间的距离
前言： 改变元素之间的间距是通过外边距或者内边距来实现的。
bootstrap5提供了简写的class名，名称分别以m-开头和p-开头的类
调整外边距
| 类名 | 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 | marin: 1.5rem !important |
| m-5 | margin: 2rem !important |
| m-auto | margin:auto !important |
调整某一侧边距
案例：
mt-2: {marign-top:0.5rem !important}
mb-2: {marign-bottom:0.5rem !important}
mr-2: {margin-right: 0.5rem !important}
ml-2: {margin-left:0.5rem !important}
mx-2: {margin-left: 0.5rem,margin-right: 0.5rem !important}
my-2: {margin-top: 0.5rem,margin-bottom: 0.5rem !important}
调整内边距
| 类名 | 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: 2rem !important |
| p-auto | padding:auto !important |
调整某一侧边距
pt-2: {padding-top:0.5rem !important}
pb-2: {padding-bottom:0.5rem !important}
pr-2: {padding-right: 0.5rem !important}
pl-2: {padding-left:0.5rem !important}
px-2: {padding-left: 0.5rem,margin-right: 0.5rem !important}
py-2: {padding-top: 0.5rem,margin-bottom: 0.5rem !important}