我该如何在桌子之间做这个空间？

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/