Home > ASP .NET > Web Development basics for ASP.NET Developers – Block vs. Inline elements

Web Development basics for ASP.NET Developers – Block vs. Inline elements

  Block Inline
Width Takes up whole width available Takes up only much width as needed
line breaks Generates line-breaks before and after Does not force any line break (except <br /> which is a special case)
width, height – css attributes applicable ignored
max-width, max-height – css attributes applicable ignored
min-width, min-height – css attributes applicable ignored
examples div, h1,h2…h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form span, a, strong, em, img, br, input, abbr, acronym
Layout behavior in normal flow stacked vertically one below the other (top to bottom) in order they appear in the document stacked horizontally one after the other (left to right) till width permits and then continues in the next line
What can it contain? other block level elements, inline elements, text data other inline elements, text data – cannot contain block level elements

Though HTML elements have their default display styles as block or inline, we can change the behavior using the display css attribute (block, inline and other exotic stuff). For example you can change the list item’s display to inline to have a horizontally stacked menu instead of a vertical one.

References:

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: