Hello. I’m struggling to understand how the border-box value of the box-sizing property works and why it’s so embraced by the front-end community. What I know is that the border-box value relates to the width of the overall container rather than the content box. So if, say, I have an element that’s 200px wide that element should only be 200px and no wider than that. However, I In these screenshots, the top line has line-height: 0 and font-size: 75% for sub and sup. The bottom line has the normalize CSS and is more consistently positioned between browsers. IE6. IE8. IE11. Chrome — The differences are not as big in modern browsers. The differences are minor, but the normalize CSS gives a more consistent look between CSS uses a box-model that was defined in the spec a long time ago. IE used a different one, that ended up being the more intuitive one. Border-box is the IE box model, where padding/border is included in the size of an element. Normal box model: width:80px + padding:10x = element with 100px total width. 80px of that is is useable content space. An element with box-sizing: content-box. With box-sizing: content-box, an element's size is calculated by adding the border, padding, and margin sizes to its width and height. Let’s say an 但也不能盲目地用，因为它会影响content，如果padding和border太大，会把内容挤掉的。 总结： box-sizing:content-box;在宽度和高度之外绘制元素的内边距和边框。 box-sizing:border-box;通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度. box-sizing: content-box; uses the box-model that everyone is used to, sometimes called the “W3C Box Model”. While box-sizing: border-box; uses the box-model that people have come to associate with Internet Explorer, where the dimensions of the padding and border are included in the element’s dimensions. Take a moment to look at the Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way. There are a few properties that affect an outline's appearance. It is possible to change the style, color, and width using the outline property, the distance from the border If you need to make adjustments to the third party content you can apply box-sizing: content-box; to the widget and its descendants. This may not be trivial as form controls in particular are border-box by default, so you’ll also have to account for that. 02.01.2012: Added a section on performance. 2012.02.03: Included webkit prefixed 9Fzaa.

box sizing border box vs content box