Hello,

I been wondering why one would want to change the display from inline to block level on some tags.

Refering to this code: The div is as default a block level tag, why would we need to change it to inline. Apparently inline means flow within the line. I need some better examples than this one to really understand it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Inline and block level elements</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
#one {
background-color: #CCCCCC;
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
}
#two {
background-color: #CCCCCC;
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
display: inline;
}
a {
background-color: #ACACAC;
color: #FFFFFF;
text-decoration: none;
padding: 1px 2px 1px 2px;
}
a.block {
display: block;
}
</style>
</head>
<body>
<div id="one">A div is a block level element.</div>
<p>It is possible to display a div or any other block level
element as an inline element.</p>
<div id="two">This div is displaying as an inline element.</div>
<p>This paragraph contains a <a href="http://www.sitepoint.com/"
>link</a> that displays as an inline element.</p>
<p>This paragraph contains a <a class="block"
href="http://www.sitepoint.com/">link</a> that displays as a
block element.</p>
</body>
</html>