How Nested Block Elements Are Formatted

Q

How Nested Block Elements Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules

✍: FYIcenter.com

A

If a block element is nested in another block element, the inner block, child block, will be formatted as the content box of the outer block, parent block. The HTML and CSS document below shows you how nested block elements are formatted:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 425px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  DIV#parent {width: 230px; height: 230px;
    margin: 30px 10px 40px 20px; 
    border: thin solid red;
    padding: 30px 10px 40px 20px; 
    background-color: #ddffdd}
  P#child {width: 200px; height: 200px; 
    border: thin solid blue;
    padding: 30px 10px 40px 20px; 
    font-size: 14px; 
    background-color: #ffffff}
  TD.legend#w30 {height: 32px; background-color: #ffffff}
  TD.legend#g30 {height: 32px; background-color: #dddddd}
</style>
</head><body><div class="page">
<H1>Nested Block Elements</H1>
<table id=out><tr>
<td id=box><div id=parent><p id=child>
Welcome to FYIcenter.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to FYIcenter.com to share with others. 
</p></div></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=w30>- parent margin</td></tr>
<tr><td class=legend id=g30>- parent padding</td></tr>
<tr><td class=legend id=w30>- child padding</td></tr>
</table></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

Save this document as nestedBlocks.html, and view it with a browser, you will see how nested block elements are formatted:
Nested Blocks

2007-05-11, 5553👍, 0💬

How Are the Parent Padding Spaces Collapsed with the Child Margins
How Are the Parent Padding Spaces Collapsed with the Child Margins? - CSS Tutorials - Understanding Multiple Element Formatting Rules If child block element is enclosed in a parent block element, the vertical margins of the child element could be collapsed with the padding spaces of the parent eleme... 2007-05-11, 6559👍, 0💬

How In-Line Elements Are Mixed in Text Lines
How In-Line Elements Are Mixed in Text Lines? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If an in-line element is mixed in a text line, it will be placed immediately after the preceding character. The vertical position of the in-line element will be determined by it... 2007-05-09, 6409👍, 0💬

How In-line Elements Affect Line Box Heights
How In-line Elements Affect Line Box Heights? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If a line box contains only text without any in-line elements, its height is equal to the line-height property of the enclosing block element. If a line box contains text mixed ... 2007-05-09, 6066👍, 0💬

How Floating Elements Are Formatted
How Floating Elements Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of t... 2007-05-11, 5875👍, 0💬

How Two Block Elements Are Formatted as a Stack
How Two Block Elements Are Formatted as a Stack? - CSS Tutorials - Understanding Multiple Element Formatting Rules If two block elements are coded next to each other, they will be formatted as a vertical stack of two boxes. The HTML and CSS document below shows you a stack of two block elements: &am... 2007-05-11, 5746👍, 0💬

How Nested Block Elements Are Formatted
How Nested Block Elements Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules If a block element is nested in another block element, the inner block, child block, will be formatted as the content box of the outer block, parent block. The HTML and CSS document below shows... 2007-05-11, 5554👍, 0💬

How In-line Elements Are Formatted Side by Side
How In-line Elements Are Formatted Side by Side? - CSS Tutorials - Understanding Multiple Element Formatting Rules If in-line elements are coded next to each other, they will be formatted side by side in a line box. Their individual widths and heights will be respected. Their relative vertical posit... 2007-05-11, 5454👍, 0💬

Is FORM a Block Element
Is FORM a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements Is <FORM> a block element? The answer is yes. <FORM> is behaves like a <P>. Below is a good example of a floating block element and a floating inline element: <html>&... 2007-05-11, 5447👍, 0💬

How Many Ways Can Elements Relate to Each Other
How Many Ways Can Elements Relate to Each Other? - CSS Tutorials - Understanding Multiple Element Formatting Rules From a formatting point of view, HTML elements can relate to each other in the following ways: Line up side by side - In-line elements coded next to each other are formatted side by sid... 2007-05-11, 5298👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.