去除兩端margin的方法

假如有一份視覺稿，其中一部分是實現這樣的：

兩排橫向排列的框，它們中間有邊距，兩端無邊距。每個框大小為100*100，外邊距為20，整個區域為460*220。

HTML結構：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

根據以上結構大致想到：li左浮動是必須的，可以給每個li加20px的左邊距或右邊距，然后再加20px的上邊距或下邊距。

初步設置后是這樣的

有以下三個方法解決多出的外邊距問題。

方法一：

<div>
    <ul>
        <li class="first"></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="first"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

div {
    overflow: hidden;
    width: 460px;
    height: 220px;
}
ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #0099cc;
}
li {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-bottom: 20px;
    background-color: #FFF799;
}
li.first {
    margin-left: 0;
}

在上下邊距中我選擇了添加下邊距，在最外層div限定高度並overflow:hidden，於是多出的下邊距被隱藏；左右邊距的處理辦法是在每一行的第一個li添加一個class=first，單獨處理這個first。

這是一種很普遍的做法，在很多網站的結構中都能看得到。

這樣做的缺點：要單獨設置每一行的第一個元素或者最后一個元素，若是有很多行則要處理很多行，並且多添加了一個class。

方法二：

HTML上面不用做任何改動，也不用添加class，最外層div設定高度和寬度，ul添加20px的左負邊距。

div {
    overflow: hidden;
    width: 460px;
    height: 220px;
}
ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #0099cc;
    margin-left: -20px;
}
li {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-bottom: 20px;
    background-color: #FFF799;
}

個人比較喜歡用負邊距來彌補邊邊角角的問題，比如解決“邊框合並”、“兩端邊距/邊框”、“tab選項卡”。

方法三：

給ul加寬（添加的寬度大於等於li的外邊距，小於li的寬度即可，這樣可以讓ul的寬度多容納一個外邊距，又不會讓下一行的li擠上來），最外層div設置overflow:hidden，li設置右邊距。

div {
    overflow: hidden;
    width: 460px;
    height: 220px;
}
ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #0099cc;
    width: 480px;
}
li {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #FFF799;
}

 

 

歡迎批評指正。