如何在保持邊距的同時使 Div 寬度為 100%？

以100% 寬度和邊距顯示Div

當嘗試在保持邊距的同時顯示100% 寬度的div 時，某些CSS 屬性可以發揮作用。

在提供的程式碼中，HTML 結構包含一個容器 div (#page) 和一個具有所需 100% 寬度和邊距的內部 div (#margin)。但是，浮動元素並將其寬度設為 100% 可能會導致內部 div 超出容器的寬度。

要解決此問題，可以使用 calc() CSS 函數。在更新的CSS 程式碼中：

#margin {
  width: calc(100% - 10px);
}

此表達式從可用寬度中減去10 像素（所需的邊距寬度），允許內部div 在容器內完全展開，同時遵守指定的邊距。

另一個方法是，不要使用邊距，而是可以使用 padding 和 box-sizing: border-box 屬性。將box-sizing 設定為border-box 時，內邊距包含在總寬度中，以適應div 內的寬度和邊距：

#page {
  padding: 10px;
}

#margin {
  box-sizing: border-box;
  width: 100%;
}

透過實現這些解決方案中的任何一個，都可以顯示寬度為100% 的div，同時保留所需的邊距。

以上是如何在保持邊距的同時使 Div 寬度為 100%？的詳細內容。更多資訊請關注PHP中文網其他相關文章！