Useful Link must read ...http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
A block-level element is an element that creates large blocks of content like paragraphs or page divisions. They start new lines of text when you use them, and can contain other blocks as well as inline elements and text or data.
An inline element is an element that define text or data in the document like STRONG makes the enclosed text strongly emphasized and Q says the enclosed text is a quotation. They don't start new lines when you use them, and they generally only contain other inline tags and text or data. Or they include nothing at all, like the BR tag.
There is also a third type of element in HTML - those that aren't displayed at all. These tags are the ones that provide information about the page but don't necessarily show up in the visible portion of the page. For example: STYLE to define styles and stylesheets, META to define meta data, and HEAD to hold those elements.
So if you need to define the width or height that an element should take up, you need to apply that to the block-level element containing your inline text.
A block-level element is an element that creates large blocks of content like paragraphs or page divisions. They start new lines of text when you use them, and can contain other blocks as well as inline elements and text or data.
An inline element is an element that define text or data in the document like STRONG makes the enclosed text strongly emphasized and Q says the enclosed text is a quotation. They don't start new lines when you use them, and they generally only contain other inline tags and text or data. Or they include nothing at all, like the BR tag.
There is also a third type of element in HTML - those that aren't displayed at all. These tags are the ones that provide information about the page but don't necessarily show up in the visible portion of the page. For example: STYLE to define styles and stylesheets, META to define meta data, and HEAD to hold those elements.
Inline Formatting is Different from Block Formatting
One of the most common mistakes a newcomer to Web design makes is trying to set a width on an inline element. This is because inline elements don't have widths. That is, they do have widths, but the width is set by the container box. Some other properties that inline elements ignore include:- width and height
- max-width and max-height
- min-width and min-height
So if you need to define the width or height that an element should take up, you need to apply that to the block-level element containing your inline text.
Changing the Type of an Inline Element to Block and Vice Versa
With CSS you can change the type of an element from inline to block or the reverse with just one CSS property:display: block;
display:inline;
display:none;When to Change the Display Property
In general, I like to leave the display property alone, but there are some cases where turning a block-level element into an inline and vice versa can be useful.- Horizontal list menus - Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element, so that newlines aren't added between each list item.
- Headers in the text - Sometimes you might want a header to remain in the text, but have the HTML header values. Changing the h1-h6 values to inline will let the following text flow next to it.
- Removing the element - And of course, if you want to remove the element completely from the document flow, you can set the display to none.
