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

Question

我正在尝试使用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或{时{1}}甚至使用padding-bottom我无法创建所需的效果。我似乎只能在元素的左侧添加填充。

任何人都可以帮助我找出为什么这不起作用吗？

Answer 1

需要display: block

CSS

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

Answer 2

同时添加display: block。默认情况下span元素中的inline：

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

Answer 3

为此style文件中的班级.price提供custom.css

.price {
  padding: 0px 8px;
 }

这将反映出来。