Block vs. inline level elements

posted on 07 Nov 2011 01:06 by inet03 in Web-Coder
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
Examples of block elements include [div], [p], [h1], [form], [ul] and [li].
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
  • Width is as long as the text/image and can't be manipulated
Examples of inline elements include [span], [a], [label], [input], [img], [strong] and [em].
To change an element's status you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to:
  • Have an inline element start on a new line
  • Have a block element start on the same line
  • Control the width of an inline element (particularly useful for navigation links)
  • Manipulate the height of an inline element
  • Set a background colour as wide as the text for block elements, without having to specify a width
Credit : Ten CSS tricks you may not know




Richter View my profile