CSS Display Block and Inline

Question

Can somebody help me with this code?

Btw, the code explains it all. https://code.sololearn.com/WM1zi4N2ClyN/#css

Answer 1

Use Inline-block if you want the border back

Answer 2

If you have a <p> inside a <div>, and you let both default behavior (display:block), you'll get what you expect.
Now, turning display of the outer to inline level element, the result shouldn't be what you expect, until you're not aware that a block level element CANNOT be child of an inline level one).

So initial code:

<div>
<p>sample text</p>
</div>

with <div> styled to inline, becomes INVALID, and usually is automatically and silently "corrected" (made valid, even if that fits not your expect) internally to:

<div class="inline"></div
<p>sample text</p>
<div class="inline"></div>

Notice:
+ <p> is no more child of <div>
+ unfortunally, 2nd div doesn't have necessarly kept class during the split (unpredictable from one implementation to another :(

The two <div>s are of inline level, blank (only white spaces), so are zero-width sized (and 1 line height since there's at least one space -- even a new line char): set a bigger border-width (ie: 3px) to the dotted border element, and you will see that!