Inline Elements
Inline elements mean there is only required space on the web page.
It only uses the space that is required.
A line break is not used to begin an inline element.
Inline elements cannot contain a block-level element.
For example <span> hi i am inline elements</span> , <img/> ,<abbr>.
Span will not start on a new line and only takes up as much width as necessary.
<!--InLine element -->
<span>Lorem ipsum dolor sit .</span>
<span>Lorem ipsum dolor sit.</span>
<img src="https://play-lh.googleusercontent.com/ZyWNGIfzUyoajtFcD7NhMksHEZh37f-MkHVGr5Yfefa-IX7yj9SMfI82Z7a2wpdKCA=w240-h480-rw" alt="google photos" height="" width="" title="google photos">
Block Elements
Block elements mean they cover the entire line of the web page or the entire width of the web page.
It always begins on a new line.
A line break is used to begin an inline element.
For example <p> hi I am block elements</p>, <div></div>
P for Paragraph will always start on a new line and it takes the entire width of a web page.
<!-- block element -->
<h1>block element</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, saepe ipsum. Est, similique error suscipit ducimus qui eos maxime enim architecto tenetur exercitationem culpa ea repellat sit earum nulla explicabo?</p>
<div>div also block element</div>
<!-- hr : horizontal line -->
<hr>