如何创建 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中文网其他相关文章！