我怎样才能在表之间做这个空间？

Question

我正在学习html＆amp;我下载了一个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/