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

Posted 2023-03-06

【中文标题】如何为页面上的元素添加填充？

【英文标题】：How can I add padding to an element on my page?

【发布时间】：2016-04-14 11:42:18

【问题描述】：

我正在使用 wordpress。我尝试使用检查元素移动一行文本，该文本基本上与 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

【问题讨论】：

有人可以去结帐页面吗……那个页面更糟……每一行文字都是重叠的……你可以输入任何类型的信息继续访问我所指的页面......它的页面是人们将在那里插入信用卡信息......这是我最大的问题......我整天都在强调它

【参考方案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 中。当您有环绕的文本时，分隔它们的唯一方法是定义行之间的高度。

要解决您的结帐问题，还要在该类上修复行高：

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

如果您想在一组 CSS 指令中解决此问题，请改为：

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

【讨论】：

好的，因为我在结帐页面上遇到了同样的问题...感谢您的帮助...在我的结帐页面上人们会在那里输入信用卡信息.....每一行文本都在另一行重叠......这也能解决这个问题吗？

@chris - 听起来您应该调整站点的 base 行高。这很可能导致所有这些问题。我看到它是 1.3em - 这很短。您可能希望它更高一点（不是像素，而是 em），例如 1.5 或 1.6em

不太可能，如果您查看说明，您会告诉它仅当 HTML 遵循与此 CSS 规则中显示的相同路径时才执行此操作。最好的方法是找到一个可以在需要时附加的通用类，或者找到一个通用范围

@cale_b 是对的。 Line -height 绝对是您的问题，而不是填充，但在覆盖任何内容之前，请调整您已有的值。这当然还是会引出一个问题，为什么模板设计者定义的这么低？除了您遇到问题的那两个地方之外，在大多数地方是否都需要这个 line-height？

这是一个让步。如果调整初始值可以解决大部分问题，请执行此操作。如果没有，请找到一个适用于您仅有的两个问题的规范

【参考方案2】：

问题在于它是一个 span 元素，它并不能真正接受 margin / padding。

有问题的元素是这样的：

html#ecwid_html body#ecwid_body .ecwid span

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

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;

【讨论】：

是的，你给我的第二个代码工作了.....它会工作我上面提到的另一个问题吗？

请看我上面的评论，这是主要问题....我尝试在代码中添加一个跨度，但它没有工作...就像我说你已经修复了第一个我遇到的问题....所以请查看另一个....无论哪种方式，我都会奖励您最佳答案...

【参考方案3】：

它是一个span元素，要激活填充，你需要添加：

display :inline-block;

【参考方案4】：

您可以为“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;

【参考方案5】：

（这里是 Ecwid 团队）

虽然此处的答案可以帮助您自己解决问题，但我们将调查 Ecwid 如何与您的“DMS”主题配合使用，并确保在我们这边解决这些问题。该问题已在我们的开发人员队列中，我们将在不久的将来在 Ecwid 插件更新之一中推出该解决方案。