レンダリングモード切替検証用サンプルソース

XHTMLソース

<div id="boxmodel_sample">
 <ul>
  <li class="first_list">First element of list</li>
  <li class="second_list">Second element of list is a bit longer to illustrate wrapping.</li>
 </ul>
</div>

CSSソース

div#boxmodel_sample {
     margin: 20px auto 0 auto;
     width: 330px;
     text-align: left;
}
ul {
     margin: 0;
     padding: 10px 0;
     background: #fc9;
}
ul li.first_list {
     margin: 10px auto;
     padding: 10px;
     width: 200px;
     background: #ff9;
}
ul li.second_list {
     margin: 10px 20px;
     padding: 10px;
     width: 200px;
     background: #ff9;
     border: 2px dotted #099;
}

• 第2章 CSSの基本法則