你是不是也遇到過這樣的問題：明明設(shè)置了 `margin: 20%`，頁面卻沒按預(yù)期縮放？
別急，這其實(shí)是很多新手開發(fā)者常踩的坑——margin 屬性值可以是百分比嗎？答案是：可以，但有前提。
很多人以為百分比就是“隨便寫”，其實(shí)不然。CSS 中的 margin 百分比不是相對于自身尺寸計(jì)算的，而是相對于父元素的寬度！
舉個(gè)真實(shí)案例：我在小紅書做穿搭內(nèi)容時(shí)，曾用 margin: 10% 設(shè)置卡片間距，結(jié)果在不同屏幕下表現(xiàn)不一。為什么？因?yàn)楦溉萜鲗挾茸兞耍琺argin 的百分比也隨之變化。比如一個(gè)卡片包裹在一個(gè)寬度為 300px 的 div 里，設(shè)置 `marginleft: 10%`，實(shí)際就是 `30px`；如果父容器變成 600px，margin 就變成 60px —— 這就是所謂的“響應(yīng)式陷阱”。
那什么時(shí)候適合用百分比？
? 適合場景：當(dāng)你希望邊距隨容器寬度動態(tài)調(diào)整時(shí)，比如移動端布局、網(wǎng)格系統(tǒng)（如 Bootstrap 的 colmd4）。這時(shí)百分比能讓你的元素更靈活地適配不同屏幕。
? 不推薦場景：當(dāng)你需要固定間距時(shí)，比如兩個(gè)按鈕之間必須保持 16px 的距離，那就該用 px 或 rem，而不是 %。
?? 小技巧：如果你不確定 margin 百分比是否生效，可以用瀏覽器開發(fā)者工具檢查元素的 computed style，它會顯示最終渲染出來的像素值，幫你快速定位問題。
最后提醒一句：margin 是“外邊距”，不影響自身寬高，但它會影響兄弟元素的位置。所以，別再把百分比當(dāng)成“萬能解藥”啦～
我是 @設(shè)計(jì)與代碼雙修的阿哲，專注分享前端實(shí)戰(zhàn)干貨和自媒體運(yùn)營心得。關(guān)注我，帶你避開90%的 CSS 坑！?
