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

Again, this is a BIG thanks to Kevin Powell, who has taught me so much about what I know about web design. He also taught me this, the difference between using width: auto; and width: 100%; (the video is here), but I kept forgetting it, so I thought I would make a post about it, possibly helping others with the same goldfish brain as mine 🙃

width: auto; means use the available space

With use the available space, it means that margins and paddings will be respected, and the element will not overflow its parent.

Kevin considers this a really unappreciated property in css, it basically helps us not screw things up, making it look good automatically 😉

This is the default value of the width property.

width: 100%; means be as big as the parent element

With width: 100%;, you want the element to be as big as its parent. The consequence is that if you have set margins and paddings on the parent element, the element will overflow, which is something you don’t necessarily want.

So there you have it, the differences between width: auto; and width: 100%; To conclude, it is basically the consequence of the width: 100%; declaration that one should be aware of.