Scribd
Upload
9 views

Inline Element Vs Block Level Element

this is a PDF about Inline Element vs Block Level Element

Uploaded by

iagrimagrawal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Inline Element Vs Block Level Element

this is a PDF about Inline Element vs Block Level Element

Uploaded by

iagrimagrawal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lesson:

Inline Element vs Block

Level Element

</>
Topics Covered
Introduction to Inline element
Introduction to Block element
Inline vs Block level elements

The HTML(HyperText markup language) elements historically were categorised as either Block-level
elements or Inline-level elements.

Note - Basic Inline CSS is used for understanding Block and Inline elements. More about CSS will be
discussed later.

Introduction to Inline Elements

An inline element is an HTML element that is used to define a part of a document's content within another
block-level element, without creating a new line.

Examples: <span> , <a>, <img> etc.

Let's try to understand this with a code example -

inline.html

Full Stack Web Development


Browser output -

In this example, we have three spans, and as we know span is an inline-level element so each span
appears just after the previous span on the same line.

Introduction to Block Elements

A block-level element is a displayed element on a separate line, coming after the content that comes
before it.

Example:- <p> tag, <h1> tag, <div> tag, <section> tag , <ul> tag etc.

Let's try to understand this with a code example

block.html

Browser output -

In this example, we have three divs, and as we know div is block level element so each div appears after
the previous div on the next line.

Inline vs Block level elements

Here are some of the points to compare the difference between Inline and Block level elements -

Full Stack Web Development


Inline Level element Block level Element

Block-level elements create a


Inline elements flow within the
Display new line and take up the full
text of a web page.
width of their parent container.

Inline elements are typically Block-element are used for


Content used for small chunks of larger sections of content such
content such as hyperlinks. as paragraphs or heading

Inline element can be nested Block level element cannot be


Nesting within other inline elements or nested within an inline
block elements element

Inline elements typically affect Block-level elements affect


Styling only the content within the the layout of the surrounding
element itself. content.

Full Stack Web Development

You might also like