What is CSS box sizing

How to use CSS box sizing: CSS box sizing we use for the maintain width and height. If we use any element then it calculate width = content width + padding + border. But when we require only mention element width then we can not manage padding or border so there we use box-sizing: border-box. If we use box-sizing:content-box then element have your natural width and height as given example below:

HTML Code:

<div class="anyElement1">CSS padding content-box</div>

<div class="anyElement2">CSS padding box-sizing</div>

  
CSS Code:

<style>

*{margin:0; padding:0;}

.anyElement1{ width: 300px; padding: 25px; background: #0bf; border:5px solid #ccc; box-sizing: content-box; }

.anyElement2{ width: 300px; padding: 25px; background: #0bf; border:5px solid #ccc; box-sizing: border-box; }

</style>