Home > UI/UX Development > CSS > Difference between Block and inline level elements

Difference between Block and inline level elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

  • Always begin on a new line
  • Height, line-height and top and bottom margins can be manipulated
  • Width defaults to 100% of their containing element, unless a width is specified
  • Ignores the vertical-align property

Inline elements on the other hand have the opposite characteristics:

  • Begin on the same line
  • Height, line-height and top and bottom margins can’t be changed, but will apply left and right margins, and any padding
  • The width is as long as the text/image and can’t be manipulated
This Article is TAGGED in , , . BOOKMARK THE permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">