# Inline and Block elements

### ***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.

```xml
<!--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 &lt;p&gt; hi I am block elements&lt;/p&gt;, &lt;div&gt;&lt;/div&gt;

P for Paragraph will always start on a new line and it takes the entire width of a web page.

```xml
<!-- 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>
```