CSS Display Block and Inline

Can somebody help me with this code? Btw, the code explains it all. https://code.sololearn.com/WM1zi4N2ClyN/#css

14th Apr 2020, 4:37 PM
Koopa Scripter
Koopa Scripter - avatar
3 Answers
+ 1
That's not border, its called external spacing or simply a "Margin"
14th Apr 2020, 4:44 PM
Mirielle - avatar
Use Inline-block if you want the border back
14th Apr 2020, 5:03 PM
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!
14th Apr 2020, 7:57 PM
visph - avatar