Ads Top

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> 



 

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.