preface

Speaking of padding, one of the most commonly used properties in box models, do you really know padding? Will the padding affect the width and height of the box? Most people would say that padding affects the width and height of the box. In my opinion, padding does not affect the width and height of the box. The premise is:

Width = auto; width = auto; box-sizing = border-box; width = auto; Do not affect the size ------ from -- Zhang Xinxu note -----Copy the code

A, padding value, will certainly affect the size

Let’s take a look

/** CSS code */. Padd {width: 30px; height: 30px; margin: 0 auto; padding: 60px; background-color: red; } <! HTML code --> <div class="padd">

</div>Copy the code

Image: Without padding.


Width is not auto; padding affects the size

If width is not auto, the padding affects the size.

/** CSS code */. Padd {width: 30px; height: 30px; margin: 0 auto; padding: 10px; background-color: red; } <! HTML code --> <div class="padd">

</div>Copy the code

The width is 30px, the height is 30px, the padding is 10, and the actual size is 50px by 50px

Width is auto or box-sizing is border-box, and the padding is not violent and does not affect the size

Let’s see if width is auto.

/** CSS code */ HTML,body{padding: 0; margin: 0; } .contents{ margin: 0 auto; width: 400px; height: 300px; background-color:#4B546C;
}
.body{
    padding: 100px;
    height: 300px;
    background-color: #717FA5;} <! HTML code --> <div class="contents">
    <div class="body"</div> </div>Copy the code

Figure: No padding value is set






conclusion

If the padding value affects the size, width, padding padding and box-sizing are border-box elements. Just remember these three elements. Don’t worry about padding anymore!!