CSS is frustrating because nobody actually times time to learn it.

Do you mean that the border box measures
Border and padding from the edge into both directions?

I don't know much css but for me it makes sense that the content box gives you the desired width/height for content. And the border box gives you a border with these dimensions.

Well, if you want to call your self a frontend webdev, then I think you'd have to know CSS pretty well.

@fuckwit content-box gives you desired width+padding+border which actually makes the element larger.

@ScriptCoded i am not a css expert. but i try to learn how things work while solving any css issue.

@abkcode Well that's always been a good way to learn for me :)

I always setup:
*{box-sizing:border-box}

I don't like to take border and padding into the equation all the time <_<

@h4xx3r Me too since i am used to bootstrap

I don't see any confusion here. content-box is the default value. You get the exact width and height you put there, everything else wrapped outside. border-box renders the padding and border inside.
If you don't know, you don't have to bother it, everything just works.
For beginners, the more stuff you put in, the less chance it works. Keep it simple!

Any frontend dev needs to know how to position and size anything with all 'display' and 'position' attributes. Get to understand webkit, key frames, pseudo classes and transitions, then scss and compiling