¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita0
CSS Display Block and Inline
Can somebody help me with this code? Btw, the code explains it all. https://code.sololearn.com/WM1zi4N2ClyN/#css
2 Respuestas
0
Use Inline-block if you want the border back
0
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!