bootstrap4简写的class以m-开头和p-开头的类

影响元素之间的间距是可以通过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}
 

 

https://v4.bootcss.com/docs/4.0/utilities/spacing/

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)