1

If I use the box-sizing property to border-box, does it make resetting margin and padding to 0 irrelevant or is it still something I should do?

i.e.

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
kudeh
  • 883
  • 1
  • 5
  • 16
  • 1
    It's enough to "reset" all the paddings and the margins. However, I've seen one interesting approach, where we apply `box-sizing` to `html`. And make `*` `*:after` `*:before` with inheritance of `box-sizing` which makes it easier to work with some external components that are projected with other type of `box-sizing` – Sergey Oct 25 '17 at 03:54
  • What you have atm. is just fine. – VXp Oct 25 '17 at 05:55

2 Answers2

7

It is still relevant as the box-model just change the way your margin/padding/border being calculated in width and height.

You can check on the below image

Box model differences

Toan Lu
  • 1,169
  • 2
  • 13
  • 27
1

When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width.

cheack this out :- http://learnlayout.com/box-sizing.html

WAEX
  • 115
  • 1
  • 9