What is the basic difference between CSS
display:inline and
display:block.
Using separately these on an element, I get the same result.
+3
A:
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
Read more about display options : http://www.quirksmode.org/css/display.html
Pranay Rana
2010-06-23 05:08:23
+1
A:
Hi Hoque,
Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
Ravz
2010-06-23 05:09:16
+1
A:
display: block - a line break before and after the element
display: inline - no line break before or after the element
indieinvader
2010-06-23 05:11:06
A:
Add a background-color to the element and you will nicely see the difference of inline vs. block, as explained by the other posters.
inflagranti
2010-06-23 05:11:37
+2
A:
display: block; creates a block-level element, whereas display: inline; creates an inline-level element. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flow of a document, whereas inline elements do not.
Some examples of block level elements include: div, h1, p, and hr HTML tags.
Some examples of inline level elements include: a, span, strong, em, b, and i HTML tags.
Personally, I like to think of inline elements as typographical elements. This isn't entirely or technically correct, but for the most part inline elements do behave a lot like text.
You can read a more through article on the topic here. Seeing as several other people in this thread have quoted it, it may be worth a read.
Damien Wilson
2010-06-23 05:21:50