一、前言
本篇文章獻給跟我一樣使用 WordPress 而且對於圖片底部和文字緊貼在一起的情況不知該如何是好的人。
如果你剛好跟我一樣遇到上面這種圖片頂部會自動與文字保持適當距離，但底部卻會與圖片緊貼在一起的情況，可以去佈景主題的「附加的CSS」貼上以下程式碼做改善。
img {margin-bottom : 16.218px}
.
二、讓圖片底部與文字保持適當距離的詳細操作步驟
- 打開Wordpress控制台，點選左邊工具列中的「外觀」，再點選「附加的CSS」。
2. 把 img {margin-bottom : 16.218px} 貼到空白的欄位中，其中數字的部分可以隨大家文章段落的行距做調整。
3. 貼完後記得點一下頂端的「發佈」。
4. 痛哭流涕得欣賞圖片底部與文字間美麗的留白。
.
三、我尋找這段CSS程式碼的辛酸血淚史
這篇文章要說的其實都已經說完了，但如果您想聽故事可以繼續往下閱讀。
由於我本身並沒有任何程式背景，所以某天看到圖片和文字突然緊貼在一起的模樣時著實嚇壞了，趕緊去後台看是哪裡沒設定好，還是佈景主題更新時出了問題，但是無論我怎麼設定、怎麼更新佈景，原本圖片和文字間的空白始終沒有出現。
於是我只好求助於Google大神，看有沒有人跟我有一樣的問題，並進而找到各種CSS程式碼，但不知為何大多無法在我的佈景正常運作，又或是無法真正解決我遇到的問題。
直到我試到以下程式碼我的文章版面才終於變正常一點。
img {margin : 12px}
不過這個程式碼不只會增加圖片底部的空白，還會增加圖片頂部的空白，沒辦法讓整體恢復成原本的模樣，只是當時這已經是我找到最適合的程式碼了，所以我就用了這個程式碼一段時間。
直到某一天，我朋友用手機把我文章的內容截給我看 ↓
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊圖片竟然直接跑出文章邊緣啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!(高八度)
因為之前我在預覽文章時都是用電腦在看，所以我不知道手機的頁面竟然會因為那串程式碼歪成這樣，讓可以為了版面美觀而捨棄一切廣告的我超級崩潰，內心不停得尖叫。
然後我幾乎是一邊哭一邊找新的程式碼，可是最終依然找不到適合的程式碼，因此我只好把 img {margin : 12px} 改成 img {margin : 6px}，讓圖片不要歪得那麼嚴重，同時又能讓圖片和文字間能保有一些距離。
後來又過了一陣子，我再次試著尋找可以解決我的問題的程式碼，才終於找到了這篇文章開頭介紹的那個程式碼，整個過程總共花了我近三個月的時間，這也就是為何我會打出「痛哭流涕得欣賞圖片底部與文字間美麗的留白」這句話的原因。
.
四、結語
儘管現在排版問題解決了，但在打這篇文章時我又發現了另一個問題，就是用手機點開我的文章要等很久才會看到圖片出現，看來我還有很長一段路要走 _(´ཀ`」 ∠)_
以上，祝福每位使用Wordpress的部落客遇到問題都能順利解決。
希望我的分享有幫助到您，感謝您的閱讀。
2023.4.29