---
# System prepended metadata

title: 調整間距的方法
tags: [css]

---

## 1.調整文字與圖片,或圖與圖,段落與段落之間間距
:::success
:bell:有1~5種距離
m-(1,2,3,4,5)上下左右
m(t,b,l,r)-1最小, m(t,b,l,r)-5最大
mt-上距, mb-下距, ml-左距, mr-右距, mx-左右, my上下,m-(1,2,3,4,5)上下左右

```
程式碼
        <div >
        	<h1 class="mt-5 mb-4 mx-3">BOBO</h1>
        	<img src="bobo.jpg" alt="" >
        </div>
```
:::info
![](https://hackmd.io/_uploads/B1cdpnB63.png)
:::


:::success
:bell:有1~5種距離
m-(1,2,3,4,5)上下左右同時有間距,m-1最小, m-5最大

```
程式碼

<p class="m-5"></p>

```
:::info
![](https://hackmd.io/_uploads/ByTfbpBah.png)
:::

<br>


## 2.調整文字之間間距
:::success
css:memo:
適用於調整中文
letter-spacing:使用px來調整間距
```
程式碼

    <style >
   p{
	letter-spacing: 16px;
    }
    </style>

```
:::info
![](https://hackmd.io/_uploads/HyvpParp3.png)
:::
:::success
css:memo:
適用於調整英文
word-spacing:使用px來調整間距
```
程式碼

    <style >
   p{
	word-spacing: 16px;
    }
    </style>

```
:::info
![](https://hackmd.io/_uploads/SkL1cTr6n.png)

:::

:::success
css:memo:
調整行高
line-height:使用px來調整行高
```
程式碼

    <style >
   p{
	line-height: 40px;
    }
    </style>

```
:::info
![](https://hackmd.io/_uploads/rySR1Cr62.png)
:::