Detailed explanation of the difference between the default value of the CSS attribute width: auto and width: 100%

width: auto

The child element (including content+padding+border+margin) fills the entire content area of the parent element.
When a sub-element has margin, border, or padding, the width value corresponding to the sub-element content area will be subtracted.
Parent element's content = child element (content + padding + border + margin)

width: 100%

Force the content area of the child element to fill the content area of the parent element
When a child element has margin, border, or padding, the width of the child element's content area does not change, but overflows the parent box and maintains the original value.
Parent element's content = child element's content

An example is worth a thousand words:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;padding: 0;
        }
        body {
            background: #dcdcdc;
        }
        .box {
            width: 400px;
            border: 3px solid red;
            padding: 0 50px;
        }
        .box1 {
            width: auto;
            height: 100px;
            background: pink;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }
        .box2 {
            width: 100%;
            height: 100px;
            background: gold;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }
        .box3 {
            width: 100px;height: 100px;background: orange;
        }
        .box4 {
            float: left;
            width: 50px;height: 50px;background: pink;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

width:auto

width:100%

Note: Image sub-width is changed to sub-content

This is the end of this article about the detailed explanation of the difference between the default values of the CSS attribute width, width: auto and width: 100%. For more relevant content about CSS width: auto and width: 100%, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!

<<: How to migrate the data directory in Docker

>>: Setting z-index property for flash overlay popup layer in web design does not work