bootstrap4 调整元素之间距离

客官°小女子只卖身不卖艺 2021-07-05 00:57 613阅读 0赞

影响元素之间的间距是可以通过`style`的`margin`或`padding`属性来实现，但这两个属性本意并不相同；  
`margin`影响的是本元素与相邻外界元素之间的距离，这里简称外边距；  
`padding`影响的元素本身与其内部子元素之间的距离，简称为内填充。

`bootstrap4`提供了简写的`class`名，名称分别以`m-`开头和`p-`开头的类。

## 一、影响距离大小的值有 ##

0,1,2,3,4,5,auto

### (1)、`margin`值有 ###

<table> 
 <thead> 
  <tr> 
   <th>class名</th> 
   <th>等价的style</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>m-0</td> 
   <td>等价于{margin:0 !important}</td> 
  </tr> 
  <tr> 
   <td>m-1</td> 
   <td>等价于{margin:0.25rem !important}</td> 
  </tr> 
  <tr> 
   <td>m-2</td> 
   <td>等价于{margin:0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>m-3</td> 
   <td>等价于{margin:1rem !important}</td> 
  </tr> 
  <tr> 
   <td>m-4</td> 
   <td>等价于{margin:1.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>m-5</td> 
   <td>等价于{margin:3rem !important}</td> 
  </tr> 
  <tr> 
   <td>m-auto</td> 
   <td>等价于{margin:auto !important}</td> 
  </tr> 
 </tbody> 
</table>

### (2)、`padding`值有 ###

<table> 
 <thead> 
  <tr> 
   <th>class名</th> 
   <th>等价的style</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>p-0</td> 
   <td>等价于{padding:0 !important}</td> 
  </tr> 
  <tr> 
   <td>p-1</td> 
   <td>等价于{padding:0.25rem !important}</td> 
  </tr> 
  <tr> 
   <td>p-2</td> 
   <td>等价于{padding:0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>p-3</td> 
   <td>等价于{padding:1rem !important}</td> 
  </tr> 
  <tr> 
   <td>p-4</td> 
   <td>等价于{padding:1.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>p-5</td> 
   <td>等价于{padding:3rem !important}</td> 
  </tr> 
  <tr> 
   <td>p-auto</td> 
   <td>等价于{padding:auto !important}</td> 
  </tr> 
 </tbody> 
</table>

## 二、调整某一侧的边距 ##

有几个缩写,`t,b,l,r,x,y`含义分别是`top,bottom,left,right,left`和`right,top`和`bottom`

（1）、`margin`例子，距离大小可以`0-5`与`auto`,这里只用期中一个值来说明含义

<table> 
 <thead> 
  <tr> 
   <th>class名</th> 
   <th>等价的style</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mt-2</td> 
   <td>{margin-top: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>mb-2</td> 
   <td>{margin-bottom: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>ml-2</td> 
   <td>{margin-left: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>mr-2</td> 
   <td>{margin-right: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>mx-2</td> 
   <td>{margin-right: 0.5rem !important;margin-left: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>my-2</td> 
   <td>{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}</td> 
  </tr> 
 </tbody> 
</table>

(2)`padding`例子

<table> 
 <thead> 
  <tr> 
   <th>class名</th> 
   <th>等价的style</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pt-2</td> 
   <td>{padding-top: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>pb-2</td> 
   <td>{padding-bottom: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>pl-2</td> 
   <td>{padding-left: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>pr-2</td> 
   <td>{padding-right: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>px-2</td> 
   <td>{padding-right: 0.5rem !important;margin-left: 0.5rem !important}</td> 
  </tr> 
  <tr> 
   <td>py-2</td> 
   <td>{padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}</td> 
  </tr> 
 </tbody> 
</table>