box-sizing: border box | CSS3 Tutorial

Published: 09 March 2019
on channel: nexTRIE
750
12

This CSS3 tutorial shows you how to control the width of your HTML elements by using the box-sizing property with the border-box value. By default in the CSS basic box model, padding and border size is added to the width and height of HTML elements. This causes them to stretch and forces us, the web designers, to manually adjust our elements' sizes. This is not ideal.

Thankfully, when using box-sizing: border-box, you can force the browser to take into account your padding and borders when calculating the width and height of your HTML elements. If you don't set border-box as the value, the default value of content-box will be applied to the box-sizing property implicitly.

More on the CSS box-sizing property: https://developer.mozilla.org/en-US/d...

More on the CSS box model: https://developer.mozilla.org/en-US/d...


On this page of the site you can watch the video online box-sizing: border box | CSS3 Tutorial with a duration of hours minute second in good quality, which was uploaded by the user nexTRIE 09 March 2019, share the link with friends and acquaintances, this video has already been watched 750 times on youtube and it was liked by 12 viewers. Enjoy your viewing!