Core CSS

The Box Model

This CSS Reference section displays the code for an example that illustrates the CSS box model.

CssBoxModel.html

<!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 &times; 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>
 

Output

Region Size Appearence
Margin 32 Pixels
Border 7 Pixels
Padding 15 Pixels
Content 260 × 50
 
 

© 2007–2025 XoaX.net LLC. All rights reserved.