Categories:
.NET (961)
C (387)
C++ (185)
CSS (84)
DBA (8)
General (31)
HTML (48)
Java (641)
JavaScript (220)
JSP (109)
JUnit (31)
MySQL (297)
Networking (10)
Oracle (562)
Perl (48)
Perl (9)
PHP (259)
PL/SQL (140)
RSS (51)
Software QA (28)
SQL Server (5)
Struts (20)
Unix (2)
Windows (3)
XHTML (199)
XML (59)
Other Resources:
How Are Vertical Margins between Two Block Elements Collapsed
How Are Vertical Margins between Two Block Elements Collapsed? - CSS Tutorials - Understanding Multiple Element Formatting Rules
✍: FYIcenter.com
The margins between two block elements will be collapsed into one margin. The taller margin stays. And the shorter margin disappears. The tutorial HTML and CSS document below shows a good example:
<html><head> <style type="text/css"> DIV.page {width: 425px; border: 1px solid black} TABLE#out {background-color: #ffdddd} TD#box {border: 1px solid black} P#hi {width: 250px; background-color: #ddddff; margin-top: 30px; border-top-width: 30px; padding-top: 30px; padding-bottom: 30px; border-bottom-width: 30px; margin-bottom: 30px; border-color: #ddffdd; border-style: solid} P#low {width: 250px; background-color: #ddddff; margin-top: 15px; border-top-width: 15px; padding-top: 15px; padding-bottom: 15px; border-bottom-width: 15px; margin-bottom: 15px; border-color: #ddffdd; border-style: solid} TD.legend {height: 29px; background-color: #ffffff} TD.legend#content {height: 80px} </style> </head><body><div class="page"> <h3>Example of Vertical Margins Collapsed</h3> <table id=out cellpadding=0 cellspacing=0><tr> <td id=box><p id=hi><script language="JavaScript"> for (i=0; i<10; i++) { for (j=0; j<10; j++) { document.write(j+' '); } } </script></p> <p id=low><script language="JavaScript"> for (i=0; i<10; i++) { for (j=0; j<10; j++) { document.write(j+' '); } } </script></p></td> <td valign=top><table> <tr><td class=legend>- margin-top</td></tr> <tr><td class=legend>- border-top-width</td></tr> <tr><td class=legend>- padding-top</td></tr> <tr><td class=legend id=content>- Content box</td></tr> <tr><td class=legend>- padding-bottom-width</td></tr> <tr><td class=legend>- boder-bottom</td></tr> <tr><td class=legend>- margin-bottom</td></tr> </table></td> </tr></table> <p align="right">By FYICenter.com</p> <div></body></html>
Save this document as TwoBlockMargins.html, and view it with a browser,
you will see the top margin of the lower block collapsed into the bottom margin of the upper block:
2007-05-11, 6251👍, 0💬
Popular Posts:
What is triple constraint triangle in project management ? Project Management triangle is depicted a...
If locking is not implemented what issues can occur? IFollowing are the problems that occur if you d...
In which event are the controls fully loaded ? Page_load event guarantees that all controls are full...
How To Wirte a Simple JUnit Test Class? This is a common test in a job interview. You should be able...
What are the five levels in CMMI? There are five levels of the CMM. According to the SEI, Level 1 – ...