What is the difference between block elements vs inline block elements?

Block level elements

1. Elements: <p>, <div>, <form>, <header>,<footer>, <nav>, <ul>, <li>, and <h1>.
2. The reason why there are block elements is because they take up all the available width on the webpage and block any other elements on the left or right of them.
3. Their height is automatically set considering the other elements inside it.
4. By Default, Block level elements always begin from a new line.
5. They create larger structure than inline elements

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Block and Inline</title>
	</head>
	<body>
	<header>
		<nav>
			<ul style="border: 1px solid blue">
				<li>First</li>
				<li>Second</li>
				<li>Third</li>
			</ul>
		</nav>
	</header>
	<div>
		<h1>hello world</h1>
		<p>hello para</p>
	</div>
	</body>
</html>

Inline Elements

1. Elements: <a>, <span>, <b>, <em>, <i>(italic), <cite>, <mark>, <code>, <img>, <strong>, <input>, <button>
2. Inline elements are those which take up only the amount of space they need
3. top and bottom margins cannot be applied on them.
4. hence they can have multiple inline element in the same line
5. they can only contain content or other inline elements

<!--We can use an image as an anchor element both being inline elements--> 
<a><img src="http://example.com/image-file.png" /></a>

hafizali05/block-vs-inline.md

What is the difference between block elements vs inline block elements?

Block level elements

Inline Elements