图像上的不可见边框答案

【问题标题】：Invisible border on images图像上的不可见边框
【发布时间】：2014-01-05 15:25:20
【问题描述】：

我正在尝试将我的 10 张随机图像分开一点，这样它们就不会被挤压在一起。我尝试使用边框，我没有收到任何错误，只是它不起作用。我正在尝试将边框用作填充，因此它必须是不可见的，并且只能在左侧和右侧。有什么帮助吗？

<html>
  <head>
    <title>Cards</title>
    <script type="text/css">
     .cardPad{
      border-top:none;
      border-bottom:none;
      border-left:10px;
      border-right:10px;
      }
    </script>
  </head>
  <body>
    <p>
     <?php 
      $cards = array("Messi", "Ronaldo", "Ibrahimovic", "Ribery", "Robben", "Neymar", "Rooney", "Casillas", "Falcao", "Van Persie", "Hazard", "Iniesta", "Xavi", "Schweinsteiger", "Silva", "Fabregas", "Lahm", "Aguero", "Cavani", "Vidic", "Ozil", "Mata", "Bale", "ThiagoSilva", "Kompany", "Tevez", "Toure", "Ramos", "Suarez", "Pirlo", "DiMaria", "Neuer", "Pique", "Buffon", "Lewandowski", "Gomez", "Chiellini", "Cole", "Pedro", "Busquets", "Cech", "Muller", "Hummels", "Alonso", "Navas", "Modric", "Cazorla", "Gotze", "Benzema", "Vidal", "Lavezzi");

shuffle($cards);

$cards = array_slice($cards, 0, 10);

foreach ($cards as $card) {
    echo "<img class='cardPad' src='http://d2bm3ljpacyxu8.cloudfront.net/fit/105x97/http://clearpkz.webs.com/webstore/$card.png'>";
}
?>
    </p>
  </body>
</html>

【问题讨论】：

你能给小提琴演示吗？
@Nish 不确定我是否设置正确，但在这里。 jsfiddle.net/N8pVn
@Journey 请看我的 jsfiddle。您必须在 jsFiddle 中使用 HTML 而不是 PHP。

标签： javascript html css image border

【解决方案1】：

我为此创建了一个 jsfiddle，this 你想要什么？

其实你可以用margin或者padding来分隔这些<img>s。我不明白为什么你不能让它工作。

您可能需要发布修改后的代码，以便我们提供帮助。

【讨论】：

谢谢，正如其他人指出的那样，这是一个愚蠢的错误，我试图制作一个 CSS

【解决方案2】：

首先，将样式表包含在<style> 标记中，而不是<script> 标记中。

<style>
     .cardPad {
       border:10px solid #00f;
       border-bottom:0;
       border-top:0;
      }
</style>

您需要指定一个边框样式才能应用。像“solid”、“dashed”等。默认的颜色是#000。为了清楚起见，我已将其更改为蓝色。

出于填充目的，请使用 padding/margin 属性而不是边框。对于 img，两者都会产生相同的效果，但实际上两者是不同的。看起来像这样

<style>
     .cardPad{
        padding: 0 10px;
      }
</style>

你可以在这里看到小提琴。 http://jsfiddle.net/Ukp6z/2/

如果你一心想使用边框，虽然不是正确的方式-

然后使用

<style>
     .cardPad{
       border:10px solid transparent;
       border-bottom:0;
       border-top:0;

      }
</style>

这将产生与这里看到的相同的效果http://jsfiddle.net/Ukp6z/3/

【讨论】：

【解决方案3】：

也许是这样的：

 .cardPad{
    ...
    padding: 10px;
 }

干杯

【讨论】：

感谢您的回答，我很感激，但它不适合我。

【解决方案4】：

就像 Rahul 写的那样，您需要在脑海中为“cardPad”类设置样式。

<style type="text/css">
    .cardPad{
    padding-right: 10px;
    }
</style>

我复制了您的代码并上传到了我的服务器，我相信此更改会给您带来您想要的效果。

【讨论】：

如果样式标签是“text/css”，我认为我们不需要在样式标签中添加类型属性。这是默认情况下假定的。
目前是正确的。出于向前兼容的目的，我通常仍然包含它。

【解决方案5】：

您可以在您的项目上使用以下一个（或多个）CSS 属性吗？

margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left

例如

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}

此页面有更多信息 -> http://www.htmldog.com/guides/css/beginner/margins/

【讨论】：

嗯，仍然不适合我。我认为是因为它是 php 但我不确定。

【解决方案6】：

代码错误（需要样式而不是脚本标签）和整体间距应该由padding 或margin 而不是border 定义，但是用这个替换<script type="text/css"></script> 标签，它应该可以工作：

<style>
.cardPad {
    border-left:10px solid rgba(0,0,0,0);
    border-right:10px solid rgba(0,0,0,0);
}
</style>

【讨论】：