1.

What is the difference between a block-level element and inline element?

Answer»

There are various elements used in HTML to build a web PAGE. All the elements fall in two CATEGORIES i.e either they are block level elements or inline elements.

  • Block Level Elements:

Block level elements are elements which start in a new line and occupy the whole available horizontal space of the parent element, it stretches both on the left and right as far as it can.

Examples of block level elements are:

<div> is used as a block level element.It always starts in a new line.

<p> p element or the paragraph element is also used as a block level element as it takes the whole available space.

In the same way header, footer, aside, address, section all these are block level elements that takes whole available space both in the right as well as in the left.

  • Inline Elements:

Inline elements are elements which only take the width required to fit into the line. If we have two inline elements, then each will take the width required by it to fit in the line. When they cannot fit in the line, they generally wraps to the next line.

Some, inline elements are <span>, <a>, <b>, <LABEL>

In the below code, we have two <div> and 7 <span> elements.

<!DOCTYPE html> <html> <head>    <title>Block Inline Demo</title> </head> <style> div, span{    font-size:1.5rem; } </style> <BODY>     <div>Lorem?</div>     <div>ipsum?</div>     <span>dolor</span>     <span>amet</span>     <span>consectetur</span>     <span>adipisicing</span>     <span>Quidem</span>     <span>quibusdam</span> </body> </html>

Save the above code as demo.html and open in any browser. You can see that the <div> elements takes their one line, whereas the <span> elements are all in one line.



Discussion

No Comment Found