如何讓寬度不固定div的左右邊距始終保持1rem？

網頁佈局技巧：讓不定寬div左右邊距始終保持1rem

在網頁設計中，如何保持一個寬度不固定的div元素的左右邊距始終為1rem，是一個常見問題。直接使用百分比會因屏幕尺寸變化而導致邊距改變，這不是理想的解決方案。本文提供一個無需百分比的有效方法。

問題：如何在一個寬度自適應的div中，保持其左右邊距始終為1rem，且不受屏幕尺寸影響？

解決方案：使用rem單位設置margin-left和margin-right屬性。 rem單位相對於HTML根元素的字體大小，只要根元素字體大小固定， rem值就不會改變。

以下CSS代碼即可實現：

 div {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: blue; /* 可選，用於方便查看效果*/
}

這段代碼設置div元素的左右外邊距都為1rem。無論div寬度如何變化，邊距都將保持不變。 background-color: blue;僅用於演示效果，實際應用中可刪除。

通過此方法，輕鬆實現寬度自適應且左右邊距固定的div佈局。

以上是如何讓寬度不固定div的左右邊距始終保持1rem？的詳細內容。更多資訊請關注PHP中文網其他相關文章！