CSS, How to understand inline and block level elements.

by admin on Aug.14, 2009, under Tutorials

Block level elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs and block quotes.

Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after. Examples of inline elements include emphasized text, strong text, and links.

All block level and inline elements are boxes that use the box model. Both types of elements can be styled with box model properties such as margin, background-color, padding, and border.

Some box model properties, such as height and width, do not apply to inline elements. Also, margin and padding applied to an inline element will affect the content on either side, but not the content above or below.

My next few posts will cover this concept in more detail…