Because this is using a border, box-sizing should be used here, right?

This would be changed to.
https://jsfiddle.net/wby16ep8/1/

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

To this, right?
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;
}

To rephrase the question, should
box-sizing: border-box;

Be used here, or not?

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;
    }

In your examples it doesn’t matter which method you use as you can account for the measurements easily using border- box or the default content-box values.

Your examples are fixed width elements using only px for everything so the dimensions can easily be resolved to make the elements the size you wish.

If you had percentage width elements with em padding and pixel borders then the border-box value makes it easier to manage if you need elements an exact width to fit.

I prefer the border-box value as it is generally easier to manage but that is just my preference.

1 Like