CSS教程

卡片已設width:100%，加上內距後，右邊卻超出容器。先看這張卡片的box-sizing：若寬度只算內容區，左右padding與border還會再加上去。把它改成border-box，才會把這些空間算進指定寬度。 先用一張卡片看出差別 把下面HTML與CSS放進空白頁。外層寬300px，卡片寬100%，左右各有24px內距和2px邊框。這裡刻意指定content-box，避免你的主題原本已設border-box，讓問題無法重現。 <div class="demo-frame"> <div class="demo-card">卡片內容</div> </div> .demo-frame { width: 300px; max-width: 100%; } .demo-card { box-sizing: content-box; width: 100%; padding: 24px; border: 2px solid #126477; } 在外層確實有300px可用、邊框按2px計算時，卡片的邊框外緣總寬是300＋24×2＋2×2，也就是352px。100%只填滿內容區，並沒有替左右多出的52px預留位置。瀏覽器縮放可能讓邊框換算後出現小數，實際尺寸請看開發者工具的盒模型。 只改卡片的box-sizing .demo-card { box-sizing: border-box; width: 100%; padding: 24px; border: 2px solid #126477; } 同樣300px的可用寬度，現在padding與border都放在這300px裡，內容區則縮小。以邊框2px計，內容區剩248px。這個案例沒有margin；border-box也不會把margin包進width，若另加左右外距，仍須另外計算。 在原網站裡確認改到哪一層 打開瀏覽器開發者工具，選到超寬卡片本身，查看Computed裡的box-sizing、width、padding和border。先只切換這張卡片的box-sizing，比較左右邊界是否回到容器內，再把確定有效的規則寫回對應元件。 不要只看CSS檔裡有沒有border-box：選擇器可能沒有套中，也可能被後面的規則覆蓋。這個屬性預設不繼承，父層設定不代表所有後代都有同樣值；部分表單元件的瀏覽器預設也不同。修改既有主題時，先限定目標卡片，別為一個區塊直接重設全站。 還在超寬，就查別的來源 border-box處理的是指定寬度如何容納padding與border。固定寬圖片、不能換行的長字串、額外margin，或Flex子項的最小寬度，仍可能造成溢出。先找出真正超出邊界的元素，不要用整頁overflow:hidden把問題和內容一起藏掉。 最後把容器縮窄，檢查卡片內容有沒有被壓得難以閱讀。內容區最小只能到0；當padding與border本身已比可用寬度大，border-box也不能保證塞得下。此時要調小內距、調整元件排列，或重新分配空間。 參考資料 MDN：box-sizing與盒模型計算 MDN：width及百分比寬度