WESEEK Tips wiki

{{pagename}} - {{sitename}}

kaori-t

# marginとpaddingの設定

『Bootstrap』でmargin / paddingを設定する場合は、  
`① property（プロパティ)` `② sides（空白の方向）` - `③ size（サイズ）`   
の組み合わせで記述することができます。


**① property（プロパティ)**


| プロパティ | 内容  | 
| :--: | :--: |
|   m   | margin| 
| p   | padding |





**② sides（空白の方向)**
| 上下左右の指定 | 内容 | 
| :--: | :--------------: |
|  t  |     top     |
|   b  |      bottom      |
|   l  |       left       |
|   r  |       right      |
|   x  |    leftとright   |
|   y  |    topとbottom   |
| なし | 要素の四方向全てに指定 |

**③ size（サイズ）**
| サイズの指定 |    内容    |
| :----------: | :--------: |
|       0      |      0     |
|       1      |   0.25rem  |
|       2      |   0.5rem   |
|       3      |    1rem    |
|       4      |   1.5rem   |
|       5      |    3rem    |
|     auto     | autoにする |

## 参考例

![Screen Shot 0002-03-05 at 23.35.12.png](/attachment/5e610e323c28040048c5237a)

```javascript:example.jsx
<label className="label label-info mr-2">Approval Pending</label>
```
classNameに`mr-2`と記入されていますが、これはmargin-rightのサイズ２が指定されているということです。

## 他にも
`.ml-0`： 左側のマージンを0にする   
`.mr-1`：右側のマージンを0.25remにする  

`.pl-2`：左側のpaddingを0.5remにする  
`.pr-3`：右側のpaddingを1remにする  

などで指定してあげます。


