Blog of Web Designer Martin Francis

29Jun 10

Block and Inline Elements

Question?
Explain the characteristics of both inline and block elements. How, and why, can the display property be
used to manipulate these?

Answer:–
Block level elements are used to format whole blocks of text, and if not told to do otherwise span the width
of the screen and usually add line breaks before and after themselves. Block level elements are essential to
wrap content if you want your page to validate or render the content correctly in the browser.
Examples are:-

<div>
<h1> to <h6>
<hr />
<p>
<fieldset>
<blockquote>
<ul><li><ol>

Inline elements can be used in the flow of the page without causing significant changes and can be used to
affect single characters
Examples are:–

<b>
<img>
<a>
<i>
<span>

Block level elements can contain other block level elements and inline elements but you cannot put a block
level element inside an inline element.
You can make an inline element display like a block level element or vice-versa.