HTML Block and Inline Elements

In this Presentation Block and Inline Elements explained completely..

1. HTML Elements Block & Non-Block (In-Line) Level Elements

2. Description Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

3. Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can ). A block-level element is an HTML element that begins a new line on a Web page, and extends the full width of the available horizontal space of its parent element . Can have margins and/or padding If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned ). By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)

4. Example Block-level Elements <p> ,  <div> ,  <form> ,  <header> ,  < nav > ,  < ul > ,  < li > , and  <h1> .

5. Inline & Non-Block Elements An inline element does not start on a new line and only takes up as much width as necessary . Flows along with text content . Will ignore top and bottom margin settings, but will apply left and right margins, and any padding Will ignore the width and height properties If floated left or right, will automatically become a block-level element, subject to all block characteristics

6. Examples of Inline Elements: <a>, <span>, <b>, < em >, < i >, <cite>, <mark>, and <code>.