Block and Inline Elements

Block Level Elements

  • 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>

JS Bin on jsbin.com

Full list of block level elements can be found here


Inline Elements

  • 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>

JS Bin on jsbin.com

Full list of inline elements can be found here


Inline-Block

  • 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

JS Bin on jsbin.com


Changing Default Layout Behavior of Elements

  • The default layout behavior of elements can be overriden using 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