June 4, 2008 - Rajesh Odayanchal

CSS Block and inline level elements

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

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

Examples of block elements include

,

,

,

,
    and
  • . 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 , ,

    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

css / css tags / css3 / help css / help / tutorial /

Leave a Reply

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