表CSS样式（布局）

Question

我目前正在一个小网站上工作，现在我遇到了一些问题。我的css真的很糟糕，我几乎没有线索怎么做。

在本网站的右侧站点。

http://s526367159.online.de/reclaim/website/home-one-page/

你可以看到在它的一些图片框。那看起来不太好。我脑海中最简单的解决方案是添加一个在photoshop中创建的.png图片，但是我想用.css来做，因为我花了很多时间让这些东西工作。

我现在的问题是，是否可以添加边框，并使小图片彼此间隔一点点，而不会为每个“”添加大量代码？

这是基本的代码。

<style type="text/css"> 
.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;} 
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;} 
</style> 
<table class="tg"> 
    <tr> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" /></a></td> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" /></td> 
    </tr> 
    <tr> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" /></a></td> 
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" /></td> 
    </tr> 
</table> 

会真的很感谢这里的一些帮助。

Answer 1

尝试增加此规则：任何你想要

.md-tabs .tab-content img{ 
    margin: 3px; 
    border: 1px solid white; 
} 

变化像素和色彩。

如果你希望你的CSS规则更具体，只需使用直接父母。

Answer 2

您可以将新行添加到您的样式与此类似

.tg img{margin: 5px; border: 1px solid red;} 

这将改变所有的img标签的风格在该表中。

Answer 3

您的代码中间出现了问题。

你可以做的只是添加一个有一点样式的类，并将其应用于每个图像。

<style type="text/css"> 
.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;} 
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;} 
.spacing {padding:3px;} 
</style> 
<table class="tg"> 
<tr> 
    <td class="tg-031e "> 
     <img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" /> 
    </td> 
    <td class="tg-031e"> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" /> 
    </td> 
</tr> 
<tr> 
    <td class="tg-031e"> 
     <img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" /> 
    </td> 
    <td class="tg-031e"> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" /> 
     <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" /> 
    </td> 
</tr> 

或者你可以做这样的事情

.md-tabs .tab-content img{ 
padding: 3px; 
}