CSS - Hot To Test Padding Spaces on All 4 Sides
Interview Question Database For Software Developers
|
|
| Hot To Test Padding Spaces on All 4 Sides | | Hot To Test Padding Spaces on All 4 Sides? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements | | By: FYIcenter.com | If you want test padding spaces on 4 sides of a <P> tag,
you can use the following HTML and CSS document. It allows you
to specify padding spaces with different values and validate them
with legend boxes.
<html><head>
<style type="text/css">
H1 {font-size: 20px}
DIV.page {width: 450px; border: 1px solid black}
TABLE#out {background-color: #ffdddd}
TD#box {border: 1px solid black}
P#box {width: 300px; height: 300px;
padding: 30px 10px 40px 20px;
background-color: #ddddff}
TD.legend {background-color: #ffffff}
TD.legend#top {height: 29px}
TD.legend#content {height: 230px}
TD.legend#bottom {height: 39px}
</style>
</head><body><div class="page">
<H1>Padding Box Widths on 4 Sides</H1>
<table id=out><tr>
<td id=box><p id=box><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 id=top>- padding-top</td></tr>
<tr><td class=legend id=content>- Content box</td></tr>
<tr><td class=legend id=bottom>- padding-bottom</td></tr>
</table></td>
</tr></table>
<p align="right">By FYICenter.com</p>
<div></body></html>
Save this document as paddingBox.html, and view it with a browser
you will see that the content height is reduced from 300px to 230px,
because of the top padding 30px, and the bottom padding 40px:
| | ID: 1217 | Rank: 1216 | Votes: 0 | Views: 80 | Submitted: 20070511 |
Copyright © 2010 FYIcenter.com
All rights in the contents of this Website are reserved by the individual author.
No part of the contents may be reproduced in any form without author's permission.
|
|
|
Atom feed
List view