can anyone explain to me on a deep level of what is display block and display inline?
i want t know the full difference and how they work and hopefully its okay to ask this
6 Replies
You can image display:block is display:block-block, display:inline is display:inline-inline. display:inline-block as its name.
The first parameter for structure. It sets if the element will occupy one line exclusively. block for yes, inline for no.
Let's move to the following parameter, responsibility for the content. Typically, you can't set the width and height of inline element, but block element does.
mmm
is it okay to ask u to elaborate a bit more
The tl;dr is block elements stack on top of one another, inline elements go... in a line I guess, lol.
While not always the case, generally inline elements are used inside of text, like a
<strong>
, <em>
, or <a>
that can go inside a paragraph. They don't really influence the layout, but they allow for styling things, and they don't cause a line break.
Block level elements cause a line break, so they stack on top of each other... like if you use a <p>
, when you do the </p>
, anything that comes after it isn't next to the text inside the paragraph, but goes under it.thank you its still a bit foggy but will reread everything
make sure to play around with them too 🙂
thank you also thank you @william_o2