如何创建带边距的 100% 宽度 Div？

显示有边距的 100% 宽度 Div

要显示宽度为 100% 且有边距的可展开 div，可以使用以下方法使用：

使用 calc() Function

此方法需要浏览器支持 calc() CSS 函数。可以使用以下代码：

#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

此方法需要浏览器支持 box-sizing CSS 属性和边框 - box值：

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

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

使用padding和box-sizing：border-box允许包含边距在元素的宽度内。

以上是如何创建带边距的 100% 宽度 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！