使用 css 设置元素周围的填充或边距答案

【问题标题】：Setting padding or margin around an element with css使用 css 设置元素周围的填充或边距
【发布时间】：2014-07-23 14:43:33
【问题描述】：

我正在尝试使用 CSS 自定义我的 Wordpress 电子商务网站上的页面。特别是像这样的“可变”产品页面：

http://www.acdctv.co.uk/shop/satellite-dishes/kuma-12v-portable-flat-satellite-dish-only/

我正在尝试在数量选择器上方的主要价格元素上方和下方添加一些填充或边距（在本例中为 199.99 英镑），但似乎没有任何效果。

在我的 custom.css 文件中，我有以下内容： .single_variation .amount{font-size:1.6em; font-weight:bold;} 我知道正在努力影响有问题的元素，但是当我尝试添加margin、margin-top、margin-bottom、padding、padding-top 或padding-bottom 时，即使使用!important 我也可以' t 创建所需的效果。我似乎只能在元素的左侧添加填充。

谁能帮我找出为什么这不起作用？？

【问题讨论】：

谢谢 ManSam 先生和 graphicsdevine。 display:block; 是我们所需要的。我可以发誓我试过了！

标签： css wordpress woocommerce margin padding

【解决方案1】：

需要display: block

CSS

.single_variation .amount {
    font-size: 1.6em;
    font-weight: bold;
    display: block;
    padding: 20px;
}

【讨论】：

【解决方案2】：

也添加display: block。默认情况下，span 在 inline 元素中：

.price {
  clear: left;
  margin: 1em;
  display: block;
}

【讨论】：

【解决方案3】：

像这样在custom.css 文件中为.price 类提供style

.price {
  padding: 0px 8px;
 }

这会反映出来。

【讨论】：