cssbox-sizing

Using border-box; with padding?


The reason why I’m asking is because there is padding: 25px; added to it.

Is it a good idea here to add box-sizing or not?

Box-sizing Removed

https://jsfiddle.net/wby16ep8/1/

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

Box-sizing Added

25 x 2 = 50 + 4 = 54 + 936 = 990

https://jsfiddle.net/wby16ep8/5/

.container {
  width: 990px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  background: #000000;
  border: 2px solid #0059dd;
  box-sizing: border-box;
}

Solution

  • If the rest of your code uses box-sizing: border-box;, use it here as well.

    Other Note

    If you want to support responsive design, yes.

    Also, use the following code:

    .container {
      max-width: 990px; /* Change */
      width: 100%; /* Change */
      padding: 25px;
      margin: 100px auto;
      border-radius: 25px;
      background: #000000;
      border: 2px solid #0059dd;
      box-sizing: border-box;
    }
    

    If you don't want to support responsive design, using box-sizing would just be a preference. Do you want the width to be included or not?