Every browser has a "flow". The flow sort of emulates a word processor in that elements flow from left to right, top to bottom. Elements that do not fit at the end of a "line", wrap to the next "line", so to speak.
Block elements take up the full line. Inline elements only take up as much space as they need, so other elements can sit next to them on the same line. Unless there is a width declared, that doesn't happen with block elements.
Floating an element takes the elements out of the normal flow and shifts it to the left/right. The space that the object occupied before it was floated is empty, and collapses. If I float two elements that take up more space than the line can hold, one may fall to the next "line".
displaying two spans inline will put them together in the flow,
If I wanted to have text flow around an image in a paragraph, I would float the image not use
display:inline. If I wanted to create a horizontal menu from list item elements, I would usedisplay:inline, not float.display:inline means a element is will "stack" next to other items, like images, spans or the bold tag. This is opposed by block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.
Think of it this way...
<img /><img /><img />
<div />
<div />
<div />ex-<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.inlineDemo {display:inline}
p.blockDemo {display:block}
p.floatDemo {float:left}
</style>
</head>
<body>
<p class="inlineDemo">These two paragraphs generates inline boxes, and it results in</p>
<p class="inlineDemo">no distance between the two elements(With a single space).</p>
<p class="blockDemo">These two paragraphs generates block boxes, and it results in</p>
<p class="blockDemo">seperate line between the two elements.</p>
<p class="floatDemo">These two paragraphs generates float boxes, and it results in</p>
<p class="floatDemo">no space between the two elements.</p>
</body>
</html>
Output:
These two paragraphs generates inline boxes, and it results in
no distance between the two elements(With a single space).
These two paragraphs generates block boxes, and it results in
seperate line between the two elements.
These two paragraphs generates float boxes, and it results in
no space between the two elements
ex-<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.inlinel {display:inline; width: 4em;}
p.inliner {display:inline; width: 4em; text-align: right;}
p.floatl {width: 4em; float:left;}
p.floatr {width: 4em; float: right;}
</style>
</head>
<body>
<p class='inlinel'>The is an inline paragraph with lots of words.</p>
<p class='inliner'>The is an inline paragraph with lots of words.</p>
<br/><br/>
<p class='floatl'>The is a left floated paragraph with lots of words.</p>
<p class='floatr'>The is a right floated paragraph with lots of words.</p>
</body>
</html>Output :
The is an inline paragraph with lots of words.
The is an inline paragraph with lots of words.
The is a left floated paragraph with lots of words.
The is a right floated paragraph with lots of words.
No comments:
Post a Comment