Do HTML block/inline elements have anything to do with nesting?

Question

I only recently learned that the block/inline nature of an html element is related to its display (e.g. whether it starts on a newline and takes up the whole page width). Previously I thought that a block element is something that can contain/nest other elements. But can block elements (except may be <hr>) always contain other elements and can other elements never be nested inside inline elements?

Answer 1

Thanks Janning⭐ and ~Just Another Brick In The Wall~ .

Answer 2

~Just Another Brick In The Wall~ not exactly the question I was asking, but thanks.

Answer 3

no! bock/inline property of an element has nothing to do with nesting elements. Every html element is like an object/node. It has its own properties.

Answer 4

it's not exactly nesting it's called inheritance, which means that if you make this
<div style="width:50px;height:50px;background:yellow;">
<h4>Hello, world</h4>
</div>
the width, height and background of the div element will also be the width, height and background of the h4 element

*edit*
and as an answer to your question: Yes, you can stack (for as far as I know) everything inside tags that has an open and closing tag

Answer 5

Sonic I edited it, now the answer to "is it always possible is also included"

Answer 6

In general, elements that can contain other elements will have an opening/start and closing/end tag, while elements that can't contain other elements will be "self-closing" or "empty" (which I think is a misleading term, since the average person wouldn't think of an image element as empty when they can see the image for example).

https://www.w3schools.com/html/html_elements.asp

So nesting is a separate concept from block vs inline elements. The biggest example of this is the existence of the "clear fix hack". One would think that if you nest a bunch of things inside a div, that div will wrap or expand to fit neatly around the tallest element inside it, but that's not the case.

https://www.w3schools.com/Css/css_float.asp

Hope this is more toward where you were going with the question. 🙂