css - 您如何将整体图像 css 消除为单个 div？

Question

作为示例，我正在尝试创建缩略图，但应用了下面列出的自动 img css

img, img a {
border: none;
  margin-top:10px;
  margin-bottom:10px;
}

由于某种原因，我无法在脑海中理解它。我知道语法可能很简单，但我似乎不记得了。谢谢克里斯

Answer 1

您不能为图像添加边距的原因是因为 img 元素默认情况下是内联的。这意味着您不能为它们提供尺寸，或者从底部或顶部添加边距（以及您可能应该阅读的其他一些内容）。

这意味着为了给 img 元素提供顶部或底部的边距，您需要将其声明为块，或者更确切地说是 inline-block。这是使用

img { display: inline-block; }

然后你可以加上你的利润和中提琴：

img { 
    display: inline-block;
    margin: 10px 0; }

Answer 2

您是否尝试以某种方式设置所有图像的样式，然后排除某个容器 div 中的图像？如果您的容器 div 被称为#wrapper，那么执行以下操作：

#wrapper img,
#wrapper a img /* assuming that's what you meant rather than img a */
{
  /* undo what you did above for images inside #wrapper */
  margin-top: 0;   margin-bottom: 0;
}

img 的这种松散选择器可能会很麻烦，因为图像一直在不同的上下文中使用。我更喜欢仅对#content div 或类似内容中的图像进行样式设置。