HTML CSS basic question

Question

why do people want to change the inline element to block level element? I know it can be done with display: block but whats the reason behind doing this?

Answer 1

One example:

An image, by default, is inline. If you change it to a block element, you can make it float.

Answer 2

Some of the advantages to block over inline:

1. the ability to define both width and height,
2. the option to float the element,
3. it allows for easy centering of the element,
4. the ability to have the element take up the available space (a within ul > li navigation menus)
5. the ability to specify precise margins and padding

Answer 3

Floating any element toggles its display mode to 'block', unless then set otherwise.

Two example usages of switching an image to block instead of line;

1. It removes the weird 3px 'mysterious bottom padding' bug in IE6
2. It allows you to add margin: auto; which then centers the block image nicely, I think you'd also have to add text-align:center; to the image's parent.

Another common usage of swithcing inline to block to make elements more shapely, meaning you can set margins, width and height.

Answer 4

Setting the 'display' attribute to 'block' of an element will implicitly generate a line break before and after the element.

The element will not have any elements to the left or right of it in the normal flow of an HTML document. This normal flow can be interrupted or overridden with the 'position' and 'float' attributes of elements on the same page.

Answer 5

This helped me to get a better understanding about inline element abd block line. so +1 for your question from me.

Here you can read more about differences between inline element and block element and why people change inline to block.

http://www.ahuka.com/?page_id=119

Its a very descriptive article and words the advantages in paragraphs and will give you examples of what happens when you choose inline and when you choose block.

Here's a tad bit of info regarding inline and block elements in different scenarios. Theres more in the article though and even containing examples.

Containing

A block-level element may contain other block-level elements, or it may contain inline elements. But inline elements cannot contain block-level elements, only data or other inline elements. So a block-level element is "bigger" or "higher" in the hierarchy. It defines a larger section of of the page than an inline element does.

Spacing

Block-level elements generally begin on new lines. In practice, most browsers insert a blank line between any two block-level elements. So if you have a paragraph (block-level), and you end that paragraph and begin another paragraph, there will be blank line between them. Same thing between a header and a paragraph, between two headers, between a paragraph and a list, between a list and a table, etc. This is a useful clue as to what a block-level element is. You need these clues because it is very difficult to find a sensible list of what the block-level elements are.

Inline elements do not start on a new line. If you type out a paragraph, and decide to make one of the words italic, does the browser jump down a line for the italic word? No, it doesn’t and this is a clue as well. The italic tag is an inline tag. So is bold, strong, em, a href, etc. None of these tags causes the browser to start a new line, so these are all inline elements. A partial list of each type of element

Hope this helps.

PK

Answer 6

The answer is pretty much covered, as a tip, if you want to style parts of a text without creating line breaks use spans (an inline element) to style them. Its mostly about speed of styling.