如何向页面上的元素添加填充？

Question

我正在使用 wordpress。我尝试使用 inspect element 移动基本上与 ecwid 插件中的另一行文本重叠的一行文本。

它似乎不起作用，每次我使用边距或填充属性编辑 css 代码时都没有任何反应

在我的页面上显示产品 205 美元，实际价格为 295 美元，我想将其与实际价格分开。

我怎样才能做到这一点？

我试过使用这个代码

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container{
 padding-bottom: 5px;
  }

这里是我指的是什么

https://surveillanceshack.com/store/#!/Elec-Surveillance-system-w-4-bullet-&-4-dome/p/55396210/category=0

Answer 1

像这样添加行高：

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price {
  font-size: 24px;
  font-weight: 400;
  color: #a20505;
  white-space: nowrap;
  line-height: 21px;
}

您的两个价格都包含在同一个 div 中。当您有换行的文本时，将它们分开的唯一方法是定义行与行之间的高度。

要解决您的结帐问题，请同时修复 line-height class:

.hentry table, #comments table {
    margin-bottom: 1em;
    font-size: 80%;
    line-height: 21px;
}

如果您想在一组 CSS 指令中解决此问题，请改为执行以下操作：

.hentry table, #comments table, .ecwid-productBrowser-price {
    line-height: 21px;
}

Answer 2

它是一个跨度元素，要使填充有效，您需要添加：

{
display :inline-block;
}

Answer 3

您可以为 "was" 元素设置填充。

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container { padding-bottom:5px; }

Answer 4

问题是它是一个 span 元素，不能很好地接受边距/填充。

有问题的元素是这样的：

html#ecwid_html body#ecwid_body .ecwid span

因此，要使其上方有 space，您可以将此样式添加到样式表（最后）：

html#ecwid_html body#ecwid_body .ecwid span {
    display: inline-block;
    padding-top: 15px;
}

调整 padding-top 以适应您想要的布局。

或者，您可以通过增加元素的 line-height 来做到这一点（在这种情况下它不需要 display: inline-block）：

html#ecwid_html body#ecwid_body .ecwid span {
    line-height: 2.5em;
}

Answer 5

（这里是 Ecwid 团队）

虽然此处的答案可以帮助您自行解决问题，但我们将调查 Ecwid 如何与您的 "DMS" 主题一起使用，并确保在我们这边解决这些问题。这个问题已经在我们的开发队列中，我们将在不久的将来在其中一个 Ecwid 插件更新中推出解决方案。

如何向页面上的元素添加填充？

How can I add padding to an element on my page?

css

wordpress

margin

padding