CSS 排版詞條 3-18
邊距Margin & Padding
也常叫做：內距與外距、邊距、Padding Margin
你可能會這樣說
跟 AI 說卡片要留空間，結果背景色跟著變大，或相鄰區塊的間距不如預期，分不清內距與外距的差別。
白話解釋
Padding 往內推：內容與自己邊緣的距離，會把背景色撐大。Margin 往外推：自己與別人的距離，本身是透明的。記法很簡單：padding 是「房間裡的牆距」，margin 是「你跟鄰居的圍籬」。
排版出問題時先問：這段空間應該長在元件裡面還是外面？按鈕內的留白用 padding，按鈕與別人的距離用 margin。
還有一個坑：兩個元素的 margin 碰在一起會取大的、不吃小的，有時你以為加了間距卻沒反應，就是撞上這條規則。
親手試試
padding 是房間裡的牆距，會把底色一起撐大。
padding 往內推（背景跟著變大）、margin 往外推（透明的空隙）；相鄰兩個 margin 會取大的那個，不是相加。
這樣對 AI 說
中文就可以
卡片的間距怪怪的，請這樣整理： 卡片內部一律用 padding 24px，背景色隨內距擴大是正確的。 卡片與卡片之間用 margin 24px，不要拿空白元素去撐。 檢查相鄰區塊的 margin 是否互相抵銷導致間距不如預期，統一由上方的區塊出間距。 最後在開發者工具標註哪段是 padding、哪段是 margin，截圖給我看。