CSSについて

レイアウト

ブロック要素とfloat

横並びデザインの表現
 基本的にfloat: leftを指定して横並びを実現するが、
 <div style="float: left;">A</div>
 <div style="float: left;">B</div>
 <div>C</div>
上記の場合、Cまで横に並んでしまう
  <div style="clear: both;">C</div>
で解除する必要がある

flot要素の高さ
  <style>

     cf:after {
       content: '';
       display: block;
       clear: both;
     }
    .cf {
        zoom: 1;
     }
     </style>

 paddingとmarginの使い分け
  - paddingはグリープングする要素に指定する
  - margninはグルーピングされた要素に指定する

区切り線を含むリスト構造
 <style>
.imgListWrapper {
    overflow: hidden; /* 内包要素がはみ出た部分を隠す事ができる */
}  
.imgList {
    width:  300px;
    margin-left: -1px;
}  
.imgList li {
    float: left;
    width: 79px;
    margin-top: 10;
    padding-right: 10px;
    padding-left: 10px;
    border-left: 1px dashed #333;
}  
</style>
<div class="imgListWrapper">
    <ul class="imgList cf">
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
    </ul>
</div>

縦編
<style>
.imgListWrapper {
    overflow: hidden; /* 内包要素がはみ出た部分を隠す事ができる */
}
.imgList {
    margin-top: -1px;
}
.list li {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px dashed #333;
}
</style>
<div class="listWrapper">
    <ul class="list cf">
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
        <li><span>イメージ</span></li>
    </ul>
</div>