• Block

• Inline

• Inline-Block

  These are Many Properties in CSS Display but most common properties are given below.

The HTML Elements stack perfectly on top of each other stubbornly sit side by side ?

Why We can set the width on the div, not in the span ?

Answer lies on a CSS Property: Display.

The Block display :

The Stacker

let suppose a stack of building blocks, That's essentially how block-level elements behave.

Key Characteristics :

• Always start on a new line .

• Stretch across the full width of the container.

• You can set their width and height.

Margins and paddings on all sides are respected.

Common Block elements :

<div>,<p>,<h1> to <h6>,<ul>,<ol>,<li>,<from>,<footer>,<section>,<article>

The Inline Display:

The Text flow.

The Inline elements are sit side by side & flow naturally without breaking to new line.

Key Characteristics:

• Stay on the same line with other inline elements.

• Take only as much space as their content need.

• Width & Height properties are not work on it.

only left/right margins effects.

Common Inline Elements are :

<span>,<a>,<strong>,<em>,<img>,<i>,<b>,<q>.

The Inline-Block Display:

Inline block behave like a mix of Inline & block they sit next to each other but still let you control size and spacing.

Key Characteristics:

• Stay on the same line (like inline ).

• Only take up their content , unless you set one.

• we set width & height of elements (like block).

Margins and Padding on all sides are respected.

Common Inline-block Elements:

<img>,<button>,<input>,<select>,<textarea>.