Div Size Automatically size of content
Solution 1:
As far as I know, display: inline-block
is what you probably need. That will make it seem like it's sort of inline but still allow you to use things like margins and such.
Solution 2:
If you are coming here, there is high chance width: min-content
or width: max-content
can fix your problem. This can force an element to use the smallest or largest space the browser could choose…
This is the modern solution. Here is a small tutorial for that.
There is also fit-content
, which often works like min-content
, but is more flexible. (But also has worse browser support.)
This is a quite new feature and some browsers do not support it yet, but browser support is growing. See the current browser status here.
Solution 3:
If display: inline;
isn't working, try out display: inline-block;
. :)
Solution 4:
The easiest is:
width: fit-content;