Help?

Question

Whats the difference between inline elements and block level elements? I’m still confused so please expalain it to me.

Answer 1

inline elements are the elements that start from the same line. Like : <p> <kbd> <img> <blockquote> etc...
block level elements always start from a new like : <div> <a> <h1> <h2> etc.
You can nest inline elements and other block level elements in block level elements but can't nest block level elements in an inline element .

Answer 2

block level elements are unfriendly anti social elements who want a lot of personal space. They don't want anyone to sit next to them in class or on the bus and thus when an element is block nothing can be next to it and will drop down to the next line. They're so unfriendly that sometimes just moving to the next line isn't enough, sometimes they want extra space and thus you can modify the margins/padding to give them even more space. P tags and divs are examples of default block elements.

inline elements are the opposite they are very extroverted and social. They love everyone and want everyone to sit next to them, thus inline elements will always end up right next to each other. They have a concept of horizontal personal space but they are fine sitting on top of each other. So you can set margins for the left and right of an inline element to give some shoulder room but if you cannot make head room, they'll always directly on top of each other if they are pushed to the next line because of space. span tags and lists are examples of inline elements

inline-block elements are the most well rounded in terms of social skills. They are fine having other elements sit next to them, but they also understand personal space, so you can add top and bottom margins to them if you want so they don't sit on top of each other. in html5 buttons can only be inline-block or block and are inline-block by default

Hope this helps!

https://code.sololearn.com/WLHYDjW7wIP3/#html