Martin Francis

Blog of Web Designer Martin Francis

29
Jun 10

Block and Inline Elements


2 screen shots of web design pages


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.

p{display:inline;}

li {display:inline}

Remove the element from the page

p{display:none}

Posted by: martin Last updated on:2010-08-04 23:44:49
Tag:- css