A thing about width
The unraveling question of the day: What’s the difference between auto and 100% when it comes to width?
Let’s take a look at this example, a container with two children. At first glance, they look the same, right? But what happens when you add some inline margins to the children?
.container {
width: 500px;
}
.first-child {
width: auto;
}
.second-child {
width: 100%;
}The first child will still fit within its parent and take up all the available inline space. But the second one… it will overflow its container because its width becomes 100% plus the margins.
You might be thinking, “Why use margin and not padding?” And in some cases, I agree! But there will be times when you want to use margins, and when you do, this is a good one to remember, especially when something just doesn’t fit anymore.
