The difference between width and width is 100%

Question

Earlier, my assumption about the width of the car works as if its contents were, but now with little knowledge, it works as if its a complete block. Therefore, I am confused here with 100% width and auto width. Can someone explain to me about the differences between the explanations?

Answer 1

Auto Width

The initial width of a block level element, such as div or p, is automatic. This causes it to expand to occupy all available horizontal spaces within its block. If it has a horizontal strip or border, the width of these elements is not added to the total width of the element.

Width 100%

On the other hand, if you specify the width: 100%, the total width of the elements will be 100% of the block containing it plus any horizontal edge, indentation, and borders (if you did not use the box size: border-box, in which only quotas are added to 100 % to change how its total width is calculated). It may be what you want, but most likely it is not.

To visualize the difference, see this image:

Source

Answer 2

I wrote a detailed post about the difference of my blog .

width: auto; will try as hard as possible to keep an element of the same width as its parent container when additional space is added from fields, indents or borders.

width: 100%; will make the element as wide as the parent container. An extra spacing will be added to the size of the item without parent. This usually causes problems.

Answer 3

It is about borders and borders. If you use width: auto , then add a border, your div will not become bigger than its container. On the other hand, if you use width: 100% and some border, the width of the element will be 100% + border or margin. For more information, see this .

Answer 4

While the width value is automatic, an element can have a horizontal edge, indentation and border, without becoming wider than its container (unless, of course, the sum of the field is left + border-left-width + padding-left + padding-right + border-right -width + margin-right is larger than the container). The width of its content window will be what remains when the margin, fill, and border were subtracted from the width of the containers.

On the other hand, if you specify the width: 100%, the total width of the elements will be 100% of the block containing it plus any horizontal edge, indentation, and borders (if you did not use the box size: border-box, in which only quotas are added to 100 % to change how its total width is calculated). It may be what you want, but most likely it is not.

Source:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Answer 5

The initial width of a block level element, such as div or p, is automatic.

Use Width: Auto to cancel explicitly set widths.

if you specify the width: 100%, the total width of the elements will be 100% of the block containing it plus any horizontal edge, indentation, and border.

So, the next time you find that the width of a block-level element is 100% so that it occupies the entire available width, consider whether you need to do this so that it is automatic.

Answer 6

Using width: auto; + display: built-in unit; in css gives a terrific effect.

 width : auto; display: inline-block;