我該如何在桌子之間做這個空間？

Question

我在學習HTML & css和我下載了一個PSD文件轉換爲代碼，但我有一個小問題：
我有我的表，但我需要知道，我怎麼能在這裏做一個空間？

在這個環節我有HTML和CSS代碼：http://jsbin.com/rupih/1/edit

Answer 1

要使用CSS更改空間的寬度在表中你可以使用

table { 
    border-spacing: 10px; 
    border-collapse: separate; 
} 

欲瞭解更多信息見：Set cellpadding and cellspacing in CSS?

然而，因爲你還沒有真正得到表格數據和更多的列表，我會使用清單：

HTML

<ul class="products"> 
    <li> 
     <h2>Abercrombie &amp; Fitch</h2> 
     <img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" /> 
     <div> 
      <span class="price"><b>Price:</b> US $65</span> 
      <span class="COD"><b>COD:</b> AE001 </span> 
     </div> 
    </li> 
    <li> 
     <h2>Hollister</h2> 
     <img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" /> 
     <div> 
      <span class="price"><b>Price:</b> US $65</span> 
      <span class="COD"><b>COD:</b> AE001 </span> 
     </div> 
    </li> 
    <!-- etc --> 
</ul> 

CSS

ul.products 
{ 
    list-style:none; 
    margin:0; 
    padding:0; 
} 


.products li 
{ 
    float:left; 
    margin-right:1em; 
    margin-bottom:1.2em; 
} 

.products li img 
{ 
    padding:6px; 
    background-color: #e9f1f8; 
    border: 1px solid #d3e6f6; 
} 

.products li h2 
{ 
    color: #325A8C; 
    font-size:16px; 
    text-align:center; 
    font-family:serif; 
} 

.products li div 
{ 
    font-weight:bold; 
} 
.products li div .price 
{ 
    color: #349031; 
} 

.products li div .COD 
{ 
    color: #44403F; 
    float:right; 
    padding-right: 1.5em; 
} 

.products li div .price b, .products li div .COD b 
{ 
    color:#000; 
} 

在問候你原來的問題，最重要的部分是：

.products li 
{ 
    float:left; 
    margin-right:1em; /*Adjust this value to change the horizontal Spacing*/ 
    margin-bottom:1.2em; 
} 

除了被更多的語義HTML ，您將獲得流暢佈局的額外優勢。如果三種產品不適合整個頁面，則會相應地調整佈局。同樣，如果他們適合，它將適應更多。

看到它在這裏的行動：http://jsfiddle.net/b9evg/