Hello, dear experts in layout! Please tell me a cross-browser solution for setting the width of the div by the content of the child elements. Those. available, for example

& lt; div id = "l0_b1" style = "display: block" & gt;
  & lt; span id = "l1_s1" & gt; content with unknown width here & lt; / span & gt;
& lt; / div & gt;

How to set l0_b1 width == l1_s1 width?

Answer 1, authority 100%

As already mentioned, either inline-block or inline, if the div needs block properties, then display: inline-block; , but in this case, you must also set vertical-align : top; so that the block does not slide down when adding content.
In general, you can practice it yourself, almost every browser has a debugger for developers, in FireFox write an attribute and click all the values ​​one by one, this option is simply irreplaceable for beginners, you can clearly see how the elements behave.

Answer 2, authority 67%

This problem can be solved in several ways:

1 – With display: inline-block; :

# l0_b1 {
 display: inline-block;
 border: 1px solid purple;
} 

& lt; div id = "l0_b1" & gt;
 & lt; span id = "l1_s1" & gt; content with unknown width here & lt; / span & gt;
& lt; / div & gt; 

width: fit-content;

clear: both;