Solving the problem of using the Box-sizing property of CSS3 to solve the problems of the div width height being stretched by the inner margin

P tends to make the entire layer width and height exceed the predetermined range because of the setting of the padding, and the box-sizing attribute of CSS3 can solve this phenomenon simply, let us explain in detail the problem of using the Box-sizing property of CSS3 to solve the problems of the width height being stretched by the inner margin

Sometimes we set a fixed height or width for the elements of the page, such as P. But if the p is set with an inner margin or a border, then this p will be large. That is, its actual size becomes: Set the width of the high size + the padding + border.
This can have an impact on our layout, and if you do not want the padding and borders to affect the fixed size that we set, it is possible to do so with the Box-sizing CSS property.

1,box-sizing Property Introduction
Box-sizing allows us to define specific elements that match an area in a specific way.

Box-sizing:content-box|border-box|inherit;

value	description
content-box	This is the width height behavior specified by the CSS2.1. width and height are applied to the content box of the element respectively.
Border-box	The width and height set for the element determines the bounding box of the element. That is, any padding and borders specified for the element will be drawn within the set width and height.
inherit	Specifies that the value of the Box-sizing property should be inherited from the parent element.

2, set element content size (Box-sizing:content-box)
Content-box is the default value for the Box-sizing property. When the element's box-sizing is Content-box, the width and height we set for the element are actually set to the width and height of the element's content. The inner margins and borders of the elements are drawn outside the width and height.

For example, the following example, we set the width of the height of the size: 200px * 34px

<style>       . Form-control {             width:200px;             height:34px;             PADDING:6PX 12px;             line-height:1.42857143;             Color: #555555;                      border:1px solid #cccccc;             border-radius:4px;       }   </style>   <input class= "Form-control" type= "text" placeholder= "email Address" >

But with the padding and border, the actual size of the input box becomes: 226px * 48px

3, Set element border box size (box-sizing:border-box)
When the element's box-sizing is Border-box, the width and height we set for the element are actually set to the width and height of the bounding box of the element. That is, the inner margin, the border is drawn in this interior, and does not open the element.
The same example is set to Border-box after:

<style>       . Form-control {             width:200px;             height:34px;             Box-sizing:border-box;             PADDING:6PX 12px;             line-height:1.42857143;             Color: #555555;                      border:1px solid #cccccc;             border-radius:4px;       }   </style>   <input class= "Form-control" type= "text" placeholder= "email Address" >

The input frame size is fixed regardless of the padding and border settings: 200px * 34px