Wordpress 内联图像 - 它是否忽略右边距值？答案

【问题标题】：Wordpress Inline Images - Does it ignore the right margin values?Wordpress 内联图像 - 它是否忽略右边距值？
【发布时间】：2011-01-01 01:13:41
【问题描述】：

我正在使用 WooThemes 原创新闻主题（它是免费的！）并且我正在做一些编辑。我的条目中有一些内联图像，发生的情况是文本和图像几乎是相互对立的。当图像位于条目右侧时，我设法通过在 CSS 中使用以下代码在图像周围添加 5px 边框来修复它：

.entry img { 
    padding: 2px 2px 2px 2px;
    background:#FFF;
    border: solid 5px #FFF;
    }

它在左侧有效，但右侧似乎被推到文本下方。

但我刚刚意识到我的图像周围有一个使用“wp-caption”类的标题框，这可能是我的问题的根源吗？

感谢您的帮助！

【问题讨论】：

【解决方案1】：

margin: 10px !important;

可能会成功。

或者，通过使用这种东西使 CSS 更加指定

 body #foo .entry img { 
    padding: 2px 2px 2px 2px;
    background:#FFF;
    border: solid 5px #FFF;
    }

当然要选择合适的 ID 而不是 #foo。

【讨论】：

【解决方案2】：

正如其他人提到的，在图像上设置margin。您可能需要为 alignleft 和 alignright 类添加一些 CSS 规则；当您单击其“左对齐”或“右对齐”按钮时，这些是由 WordPress 图像选择器添加的。在对齐的另一侧添加一个指定边距的规则：

.entry img.alignleft {
    margin-right: 1em;
}
.entry img.alignright {
    margin-left: 1em;
}

顺便说一句，您应该不使用border 属性使图像与文本分离。 border 属性用于绘制边框；如果你改变你的背景颜色，你会发现你的图像周围有一个白色的粗边框，并且文本会碰到那个边框。要使元素彼此分离，请使用margin 属性。

【讨论】：