How Can I Create a 100% Width Div with Margins?

Displaying a Margined 100% Width Div

To display an expandable div with a width of 100% and margins, the following methods can be employed:

Using the calc() Function

This method requires browser support for the calc() CSS function. The following code can be used:

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

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

Using Padding and Box-Sizing

This method requires browser support for the box-sizing CSS property and the border-box value:

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

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

Using padding and box-sizing: border-box allows the margin to be included within the width of the element.

The above is the detailed content of How Can I Create a 100% Width Div with Margins?. For more information, please follow other related articles on the PHP Chinese website!