Question

我添加了“添加到购物车”按钮图片，我在其上放置了一个结帐链接，图片位于我的产品描述之上，但图片和文字之间的间距太大了......这是我以前使用的代码删除底部边距（我使用了检查元素和未选中的底部边距，看起来很完美）

<img class="alignnone size-full wp-image-623" src="(your image url)" alt="" width="383" height="70" />
<ul>
    <li>FREE WORLDWIDE SHIPPING</li>
    <li>Delivery time: 9 to 18 days</li>
</ul>

<style>
img {
  margin: 0;
  margin-bottom: 0 !important;
}
li,
ul {
  margin: 0;
  margin-bottom: 0 !important;
  line-height: 8px !important;
}
</style>

底部边际肯定是问题的根源。我使用SiteOrigin CSS插件来编辑我的css，但上面的代码没有按预期工作，you can see how it looks with code above and when I uncheck bottom margin带有inspect元素（即使我删除了代码的文本部分，文本也会变形）。

并且here you can see how the code looks before and after它已保存在SiteOrigin CSS中（也出现了一些错误）。

Answer 1

试试这个

img.size-full.alignnone {
      margin: 0;
      margin-bottom: 0px;
    }
    li,
    ul {
      margin: 0;
      margin-bottom: 0px;
      line-height: 8px !important;
    }

Answer 2

正如您已经说过的那样：“SiteOrigin CSS插件”是您正在使用的东西。

但所有带“＆lt;”的标签和“＆gt;”是HTML标签，与CSS无关（级联样式表格）。 HTML是一种标记语言，它定义标记而不是设计。

编辑：尝试使用此代码并删除刚刚发布的所有内容。

img.size-full.alignnone{
  margin-bottom: inherit;
}

TL;博士;您将HTML代码放在CSS插件中。删除它！

使用css删除产品描述中图像的下边距？

2 个答案: