-1

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;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Please create a minimal example of the HTML and include it in the question itself (using a stack snippet). The question needs to be self-contained. Currently there’s not enough context to answer this question without relying on a third-party source. – Sebastian Simon Aug 13 '19 at 01:42
  • I just want to know if it is a good idea here to add box-sizing to the container, that's all. I provided links to the full code. –  Aug 13 '19 at 01:45

1 Answers1

0

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?

Chris Happy
  • 7,088
  • 2
  • 22
  • 49
  • I'm not supporting responsive design, but all my other codes on the page are using border-box. –  Aug 13 '19 at 02:44
  • 1
    @MandyEvans If everything else uses it, then keep your code consistent and use it. I often use the following code: `* { box-sizing: border-box; }` – Chris Happy Aug 13 '19 at 02:46