border-box and content-box are the two different values of box-sizing . content-box: This is the default value of box-sizing. The dimension of element only includes ‘height’ and ‘width’ and does not include ‘border’ and ‘padding’ given to element. Padding and Border take space outside the element. Hi, In this video , i have explained what is the difference between content box and border box in css. It is very important to know when you create a web lay W3C liability, trademark and permissive document license rules apply. This module extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. The box model in CSS is a set of rules that determine how your web page is rendered on the internet. In this model, a rectangular box is generated for HTML elements. Each is laid out according to its dimension, type, positioning, relationship to other elements, and external factors like viewport size. This box consists of content, padding, a Before CSS3, this box model was known as W3C box model, in CSS3, it is known as the content-box. The total width of a box is therefore left-margin + left-border + left-padding + width + right-padding + right-border + right-margin . The Box Model. • padding — space between the content & box edge; background-color fills behind this space. • border — line around the edge of the box. • margin — space outside the box, pushing other boxes away; can see through margin to what’s behind. margin & padding can take 1–4 values. With 4 values, we start at the top and The border-style property specifies what kind of border to display. The following values are allowed: dotted - Defines a dotted border. dashed - Defines a dashed border. solid - Defines a solid border. double - Defines a double border. groove - Defines a 3D grooved border. The effect depends on the border-color value. 从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。 以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。 .

box sizing border box vs content box