This CSS Reference section displays the code for an example that illustrates the CSS box model.
<!DOCTYPE html> <html> <head> <title>XoaX.net</title> <style> #idBoxModelTable { border: 2px solid #CFAA80; width:300px; background-color:#E0C0A0; margin:32px; } #idBoxModelTable th, #idBoxModelTable td { padding: 5px; } #idBoxModelTable tr { background-color:#FEFCFA; } </style> </head> <body> <table id="idBoxModelTable"> <tr style="width:300px;background-color:#F8F4E8;"> <th>Region</th> <th>Size</th> <th>Appearence</th> </tr> <tr> <td>Margin</td> <td>32 Pixels</td> <td style="background-color:#FFEEDD;"></td> </tr> <tr> <td>Border</td> <td>7 Pixels</td> <td style="background-color:gray;"></td> </tr> <tr> <td>Padding</td> <td>15 Pixels</td> <td style="background-color:#DDDDDD;"></td> </tr> <tr> <td>Content</td> <td>260 × 50</td> <td style="padding:0px;"> <div style="float:none;margin:auto;width:130px;height:25px;"> <img style="float:none;width:130px;" src="XoaXLogo.png"> </div> </td> </tr> </table> <div style="background-color:#FFEEDD;padding:0px;width:368px;"> <img style="background-color:#DDDDDD;margin:32px;padding:15px;border:gray 7px solid;" src="XoaXLogo.png"> </div> </body> </html>
Region | Size | Appearence |
---|---|---|
Margin | 32 Pixels | |
Border | 7 Pixels | |
Padding | 15 Pixels | |
Content | 260 × 50 |
|
© 20072024 XoaX.net LLC. All rights reserved.