The difference between width:100%; and width:auto

This time I will bring you the difference between width:100%; and width:auto. What are the precautions when using width:100%; and width:auto? The following is a practical case. Get up and take a look.

<p>
    </p><p>1111</p>

p{
　　width:980px;<br>　　background-color: #ccc;<br>　　height：300px;
}
p{
     width:100%;<br>　　/*width:auto;*/
    padding:10px;<br>　　background-color:#000;<br>
}

If the width of p is: 100%, it means that the width of p will be 980px, which will fill the p area, and then it has padding, so it will exceed p.

And when width:auto, it is the overall width (including width, margin, padding, border) equal to the parent width (width, excluding the parent's margin, padding, border) , so if padding already takes up 10px of space on the left and right, then the value given by width is 960px.

But whether it is width:100% or auto, the calculation reference is the parent content area width value, not the total width value.

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Waterfall flow layout and infinite loading picture album effect

CSS to achieve 3D button effect

Use transparent to make a triangle

The above is the detailed content of The difference between width:100%; and width:auto. For more information, please follow other related articles on the PHP Chinese website!