The box model

You write width: 200px, measure the element, and find it's 248 pixels wide. That's because the default value of box-sizing is content-box: the width you write applies to the content alone, and the padding and border are added on top of it.

box-sizing: border-box makes the width include the padding and border, so if you write 200, the element really is 200 wide. That's why almost every professional CSS file starts with the rule *{box-sizing:border-box}.

And remember that padding is inside and margin is outside. Padding makes the box bigger and takes on its background color, while margin pushes it away from neighboring elements and stays transparent.