Block-Level vs. Inline Elements

[khaledjaan]

1- A block-level element is an element that creates large blocks of content like paragraphs or page divisions. They start new lines of text when you use them, and can contain other blocks as well as inline elements and text or data. 2- An inline element is an element that define text or data in the document like STRONG makes the enclosed text strongly emphasized and Q says the enclosed text is a quotation. They don't start new lines when you use them what does start new lines / don't start new line means?can you give me example? your help would be appreciate it

[dsonesuk]

2 block elements such as division, or paragraph (div, p),with whatever the content within them, will take the whole width available to them and stack, 1st top, 2nd below.2 inline elements such as 'a', or 'span' widths are determine by the content inside of them, and will sit side by side until they exceed the width avaiable to them and only then stack.

[khaledjaan]

can you write the tags please in order to compare

[dsonesuk]

<p>I am 1st block element, even though text is small, the block element takes up whole width available forcing other elements to a new line</p> <p>I am 2nd block element, forced down by 1st block element to new line, i will also force other elements to a new line even if they are inline</p> <span>I am 1st inline element, my width is determined by text, therefore if another inline element come after me it will follow me directly as if one line of text</span><span> 2nd inline element of text</span>

Edited February 1, 2013 by dsonesuk

[khaledjaan]

I really thank you for your help it is clear now

[khaledjaan]

after understanding :

<h1>there two types of elements :</h1><ul><li>Block-level elements:</li><ul><li>starting new line (div)</li></ul><li>inline elements:</li><ul><li>without starting new line (span)</li></ul></ul><hr><hr><p>use div to change the color (Block-level: start new line)</p><h2>I am learning <div style="color:blue;">HTML</div></h2><br><br><p>use span to change the color (inline: do not start new line)</p><h2>I am learning <span style="color:blue;">HTML</span></h2>

[dsonesuk]

Div elements are outer block elements which usually is a container for other block elements p, h1 to h6 etc as well as inline elements.paragraphs p, headers h1 to h6 block elements should not have other block element within then, but only inline this is invalid

<h2>I am learning <div style="color:blue;">HTML</div></h2>

it can be

<h2>I am learning</h2><div style="color:blue;">HTML</div>

or better option

<h2>I am learning</h2><p style="color:blue;">HTML</p>

IF you wish to cause a newline within H2 you can use <br /> within H2 along with inline element span

<h2>I am learning <br /><span style="color:blue;">HTML</span></h2>

you can turn the span into a block element also which would mean the <br /> is not required

<h2>I am learning <span style="display:block; color:blue;">HTML</span></h2>

Edited February 1, 2013 by dsonesuk

[khaledjaan]

Thank you I understand