Always appear on a new line or row
By default, block elements take up an entire row regardless of the width of their content
Example block elements: <p>
, <h1>
, <div>
Full list of block level elements can be found here
Sit within a block level element and do not start on a new line
By default, inline elements only occupy the horizontal space needed to fit its content
The height and width properties of an inline element will not be recognized
Example inline elements: <a>
, <img>
, <span>
Full list of inline elements can be found here
Allows you make an element inline while also allowing the element to recognize height and width properties
inline-block is set as a value of the display property in CSS
// in css
p.customer-logos {
display: inline;
}
In the example above, we are using CSS to change the matching <p>
elements (with a class of customer-logos) to display inline instead of its default display layout behavior of block
For more information about the display property click here