如何在保持边距的同时使 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中文网其他相关文章！