Can someone please explain this to me

1

CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans).

2

This is way easier to understand on your own, and probably the only way.

I propose you the following steps:

  1. Open either a pen in codepen.io, or any FCC exercise, or set up a playground.html page in your pc
  2. There in, paste this html:
<span style="background-color:red">I am a span pan pan</span>
<span style="background-color:blue">I am a span pan pan</span>
<span style="background-color:green">I am a span pan pan</span>
<p style="background-color:blue">I am another paragraph. Also a short one.</p>
<p style="background-color:red">I am another paragraph. Also a short one.</p>
<p style="background-color:green">I am another paragraph. Also a short one.</p>
  1. Now one of those is inline, the other one is a block. Which one is which?
  2. Now wrap all the spans with a div tag. Give it background-color:grey
  3. Is it a div inline or block?

Remember you can always change the display. For example, add a display:none; to the div. Now turn it back to the default (block or inline-block?). And Add display:block to the second span element.

This will help you understand on your own. Also, you can make hypothesis, and sooner or later they will prove wrong, or they will work.

Check a good source here.

1 Like