• 外邊距塌陷問題：儘量避免子盒子margin-top的使用

• 盒子模型更喜歡怪異盒子模型，不然總是掉到下面去

html

<footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>                      /*放精靈圖*/
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供發票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help"></div>
        </div>
    </footer>
 

common.css

.footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;            /* mod_service用margin-top: 30px;上面部分是有一個白塊;出現外邊距塌陷問題 */
}

.footer .mod_service {
    height: 80px;
    width: 1200px;
    border-bottom: 1px solid #ccc;
}

.mod_service li {
    float: left;
    width: 250px;
    height: 50px;
    padding-left: 35px;
}

.mod_service li h5 {
    float: left;                /* 這樣文字就能自動環繞了 */
    width: 50px;
    height: 50px;
    background: url("../images/icons.png") no-repeat -252px -2px;
    margin-right: 8px;     /* 給圖片加margin的效果好，文字有float的不確定性 */
}

.service_txt h4 {
    font-size: 14px;
}

.service_txt p {
    font-size: 12px;
}