如何創建 100% 寬度並保持邊距的 Div？

顯示具有 100% 寬度和邊距的 Div

創建具有 100% 寬度的 div 同時保持邊距可能是一個挑戰。但是，有幾種方法可以實現此目的：

float 和calc() CSS 函數：

float 屬性可以水平定位div而不影響其他元素的流動。 calc() 函數可用來計算帶邊距的 div 所需的寬度。

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

padding 和box-sizing: border-box

填充和盒子大小也可以用來創造所需的效果：

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

將box-sizing 設定為border-box時，內邊距包含在寬度計算中。這可確保邊距應用於填充區域之外。

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