Categories:
.NET (357)
C (330)
C++ (183)
CSS (84)
DBA (2)
General (7)
HTML (4)
Java (574)
JavaScript (106)
JSP (66)
Oracle (114)
Perl (46)
Perl (1)
PHP (1)
PL/SQL (1)
RSS (51)
Software QA (13)
SQL Server (1)
Windows (1)
XHTML (173)
Other Resources:
How Nested Block Elements Are Formatted
How Nested Block Elements Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules
✍: FYIcenter.com
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:
2007-05-11, 4739👍, 0💬
Popular Posts:
Which bit wise operator is suitable for checking whether a particular bit is on or off? The bitwise ...
Do events have return type ? No, events do not have return type.
What is NullPointerException and how to handle it? When an object is not initialized, the default va...
What is page thrashing? Some operating systems (such as UNIX or Windows in enhanced mode) use virtua...
How can I execute a PHP script using command line? Just run the PHP CLI (Command Line Interface) pro...