作为示例,我正在尝试创建缩略图,但应用了下面列出的自动 img css
img, img a {
border: none;
margin-top:10px;
margin-bottom:10px;
}
由于某种原因,我无法在脑海中理解它。我知道语法可能很简单,但我似乎不记得了。谢谢克里斯
您不能为图像添加边距的原因是因为 img 元素默认情况下是内联的。这意味着您不能为它们提供尺寸,或者从底部或顶部添加边距(以及您可能应该阅读的其他一些内容)。
这意味着为了给 img 元素提供顶部或底部的边距,您需要将其声明为块,或者更确切地说是 inline-block。这是使用
img { display: inline-block; }
然后你可以加上你的利润和中提琴:
img {
display: inline-block;
margin: 10px 0; }
您是否尝试以某种方式设置所有图像的样式,然后排除某个容器 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 或类似内容中的图像进行样式设置。