I am pretty new to HTML and CSS and am trying to get a better grasp on what display: block; actually does to your HTML. I know it can often times fix my layout problems but I never think of it until the end of my list of possible solutions (mainly because I don't understand what it actually does). Many articles/support sites that I've looked at say that display block will make your element take up the whole line and not allow elements to bump up next to it, where as inline will continue the next element on the same line. My question is then, when you float elements why is it that display:block seems to allow all of the elements to sit next to each other on, seemingly, the same line.
Block takes up the whole line, but floated content will float into any space if can fit on that line. So floated blocks will look inline, but inline content will have an aligned bottom, while floated content will have an aligned top, as long as more than one element fits on a line.
Think of it more like this though. Blocks contain things. Inline elements only contain text.
Ok now by default there are block elements and inline elements. Block elements are easily ID'ed as they do exactly what you said above. Unless floated they will appear on their own "line".
DIV, P, UL, LI are all block elements.
Inline are things like A, SPAN, STRONG...
The rule to stick to is don't wrap another element in an inline element. So for example if you wanted to make a link in a header tag you would not do this:
<a href="#"><h2>Header</h2></a>
You would do this:
<h2><a href="#">Header</a></h2>
Because H1-H6 are block elements.
the CSS property Display can change this default behaviour. So as you know display:block forces the element to behave like that - you can also use display:inline-block - which make the element a block but also displays it inline so it doesn't appear on a new line. (not supported in I think IE8 and below)
Another big difference is that block elements (floated or not) can have the margin and padding styles defined, while inline elements can't. I think this is also true for some of the position styles as well.
actually, inline elements will take left and right padding and margin but ignore top and bottom padding or margin. Inline elements also will not apply width or height (but will base height on line-height).
I hope this makes sense! Thank you!
block
block
block
inline inline inline
floated-block floated-block
floated-block
Block takes up the whole line, but floated content will float into any space if can fit on that line. So floated blocks will look inline, but inline content will have an aligned bottom, while floated content will have an aligned top, as long as more than one element fits on a line.
Think of it more like this though. Blocks contain things. Inline elements only contain text.
Ok now by default there are block elements and inline elements. Block elements are easily ID'ed as they do exactly what you said above. Unless floated they will appear on their own "line".
DIV, P, UL, LI are all block elements.
Inline are things like A, SPAN, STRONG...
The rule to stick to is don't wrap another element in an inline element. So for example if you wanted to make a link in a header tag you would not do this:
You would do this:
Because H1-H6 are block elements.
the CSS property Display can change this default behaviour. So as you know display:block forces the element to behave like that - you can also use display:inline-block - which make the element a block but also displays it inline so it doesn't appear on a new line. (not supported in I think IE8 and below)
Further reading: http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
Hope that helps.
inline-block, just to throw another into the mix! Here is an article I wrote a little while ago: http://joshnh.com/2012/02/why-you-should-use-inline-block-when-positioning-elements/display:inline, difficult to centering the floated element withdisplay:blockT_Tmarginandpaddingstyles defined, while inline elements can't. I think this is also true for some of thepositionstyles as well.