Difference between Block vs Inline vs Block-Inline elements.

Block Elements Inline Elements Inline-Block Elements
Block level elements normally start and end with a new line, when displayed in a browser. A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. Inline elements are normally displayed without line breaks. An inline element has no line break before or after it, and it tolerates HTML elements next to it. An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
respects all paddings left & right margins and padding, but not top & bottom allow other elements to sit to their left and right.
force a line break after the block element cannot have a width and height set respect top & bottom margins and padding
p
h1, h2, h3, h4, h5, h6
ol, ul
pre
address
blockquote
dl
div
fieldset
form
hr
noscript
table
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
A combination of block and inline is an example of inline-block with style=”display: inline-block”
From a rendering point of view,
<div> == <span style=”display: block”>
From a rendering point of view,
<span> == <div style=”display: inline”>
From a rendering point of view,
<div> == <div style=”display: inline-block”>

See more @ http://dustwell.com/div-span-inline-block.html

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s