bootstrap中调整元素的内外边距的类名

左手的ㄟ右手 2023-06-15 11:17 10阅读 0赞

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

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

一、影响距离大小的值有

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

(1)、margin值有

<table title=""> 
 <tbody> 
 <tr> 
 <td>class名</td> 
 <td>等价的style</td> 
 </tr> 
 <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 title=""> 
 <tbody> 
 <tr> 
 <td>class名</td> 
 <td>等价的style</td> 
 </tr> 
 <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 title=""> 
 <tbody> 
 <tr> 
 <td>class名</td> 
 <td>等价的style</td> 
 </tr> 
 <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 title=""> 
 <tbody> 
 <tr> 
 <td>class名</td> 
 <td>等价的style</td> 
 </tr> 
 <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>