padding standard box model and weird box model

We all know that padding is setting the padding for block-level elements

But in the process of use, we will encounter some problems. Padding's standard box model and weird box model

Padding box model

We use the demo to talk about this problem, with the words to do the first boring, the second is not understand

Standard Box Model:

Let's start with the HTML and CSS code:

1 <Divclass= "Shoebox">          <!--This div mimics the shoe box of the shoe -2         <Divclass= "Shoes">                <!--This div mimics the shoes -3         </Div>4     </Div>

1 . Shoebox{2 width:100px;3 Height:100px;4 Background-color:#389cff;5 Padding-left:10px;padding-right: 10px;  　　　 6}7 8 . Shoes{9 width:80px;Ten Height:80px; One Background-color:#98bf21; A}

A small demo of the code has been put out, a very simple demo, first of all, to tell his intentions, my pair of size is 80*80 shoes, for this I gave this shoe made a 100*100 box, I want to let this shoe has 10px of the inner margin, So I set up a padding-left:10px and a padding-right:10px.

We imagine the effect of the scene may be this: there are wood, there is wood, good, but the reality is really good cruelty. He is like this:

At this time we will be very strange, clearly we set the height and width of the shoebox is 100*100 how to become 110*110, this more out of the 10px is how to go.

This is the result of the expansion of the padding element. In the standard box model, the setting padding will automatically squeeze the space, and will not take advantage of the space given out, will not occupy the width of the position, not through the width of the influence, will self-extrusion space, as if, my shoes are 80*80, I do not need 100*100 box, you give me a 80* 80 of the box is good, I am on my own to squeeze him into a 100*100, then the obvious solution is out, the width of our box as long as set to 80*80 and then set the padding:10px, so that the shoes to squeeze the surrounding space into a 100*100.

This is padding's standard box model, make your shoes first, then do the boxes.

Weird box model

The difference between the weird box model and the standard box model is that the weird box model is to do the box first, and then to make the shoes, I fixed the size of the box, and your shoes are no use.

At this point we just add a box-sizing:boeder-box in our code, you can hold my box, then your shoes want to use padding to support the space of the box is useless, because the shoes have been fixed dead, then we can use the code:

1  <Divclass= "Shoebox">          <!--This div mimics the shoe box of the shoe -2         <Divclass= "Shoes">                <!--This div mimics the shoes -3         </Div>4     </Div>

1 . Shoebox{2 width:100px;3 Height:100px;4 Background-color:#389cff;5 box-sizing:Border-box;6 Padding-left:10px;7 Padding-top:10px;8}9 Ten . Shoes{ One width:80px; A Height:80px; - Background-color:#98bf21; -}

To achieve the effect we want:

Finally, in summing up a little padding knowledge:

1. When we set a fixed value for width or 100% for width, setting padding will squeeze the box open and squeeze it.

2. If you want to not use the weird box model and do not squeeze the box large, please set width to auto,width the default value is auto. Automatically fills the entire screen

3. The standard box model is commonly used on PC side, because the PC-side screen is large and has the advantage to support

4. Weird box model is more commonly used on mobile phones. The phone screen is limited in size, and sometimes we often need to use the weird box model to hold him.

5. The box size of the weird box model is also added to the size of the border.

This article is original work, without permission can not be reproduced privately, thank you!

padding standard box model and weird box model