bootstrap4 調整元素之間距離

https://blog.csdn.net/jianye5461/article/details/79463014


影響元素之間的間距是可以通過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}

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章