填充和边距不起作用

Question

我的整个网站都存在问题，我不确定如何解决。当我尝试为某些元素添加填充或边距时，它们只是不起作用。

这是网站部分未响应 CSS 的 jsfiddle。

https://jsfiddle.net/a90sns1c/

我正在尝试将填充添加到 .banner-sub 的顶部，但填充只是与上述元素重叠而不是向下推。

css:

#banner-wrap{
    text-align: center;
}
.banner-title{
    padding-top: 75px;
    padding-bottom: 40px;
    color:#fff;
    font-size: 42px!important;
}
.banner-icons{
    width: 780px;
    margin: 0 auto!important;
    padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
    background-image:url('../images/banner.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.banner-sub{
font-size: 24px!important;
    font-family: 'Hind', sans-serif!important;
    font-weight: 400;
    }

#anchor-icon{padding-bottom: 30px;}

html:

<div id="banner-wrap">
    <div id="banner" class="container">

     <!--  <div class="banner-bg-img">
            <img src="images/banner.png" />
        </div>-->

        <div id="banner-content">
            <h1 class="banner-title">Quality assurance through planning<br /><span class="banner-sub">Nationwide leaflet distribution and sample delivery</span></h1>

            <div class="section group banner-icons">
                <div class="col span_1_of_4">
                    <img src="images/icon1.png" />
                </div>
                <div class="col span_1_of_4">
                    <img src="images/icon2.png" />
                </div>
                <div class="col span_1_of_4">
                    <img src="images/icon3.png" />
                </div>
                <div class="col span_1_of_4">
                    <img src="images/icon4.png" />
                </div>
            </div>

           <div id="banner-button"> <a href="#" class="ghost-button">WHY CHOOSE US</a></div>
            <div id="anchor-icon"><a href="#"><img src="images/down-icon.png" /></a></div>

        </div>

    </div>
</div>

Answer 1

将display:inline-block 添加到.banner-sub 类。

.banner-sub {
    display: inline-block;
    font-family: "Hind",sans-serif !important;
    font-size: 24px !important;
    font-weight: 400;
    padding-top: 200px;
}

jsfiddle

Answer 2

设置display:block; 或dispaly:inline-block。 <span>是一个内联元素。

CSS

.banner-sub{
    display:block;
    font-size: 24px!important;
    font-family: 'Hind', sans-serif!important;
    font-weight: 400;
    padding-top:200px;
    }

DEMO HERE

Answer 3

您正在将 class .banner-sub 应用于作为内联元素的 span ，因为您的 class .banner-sub 没有设置任何显示属性，默认情况下 display:inline 将在 span 上设置为它的内联element.width 填充边距不适用于内联元素（如果您想知道为什么，请参阅What is inline , block and Inline-block in css。）

现在对于您的问题，您可以做些什么。我建议在跨度上进行一些更改而不是快速修复（使用内联块）。 正如我在上面的代码中看到的那样，您使用了 h1 标签（默认字体大小：24px；），但是您在 css 中用字体大小 42px 覆盖它。所以你在这里并不需要 h1 ，而不是使用 h1 标签使用 div 并在里面放另一个 div 而不是 span 这应该是考虑到你的场景的正确方法。发布您的代码以及所有建议的更改。

#banner-wrap {
  text-align: center;
}
.banner-title {
  padding-top: 75px;
  padding-bottom: 40px;
  color: #ccc;
  font-size: 42px!important;
}
.banner-icons {
  width: 780px;
  margin: 0 auto!important;
  padding-bottom: 50px!important;
}
#banner-button {
  padding-bottom: 50px;
}
#banner-content {
  background-image: url('../images/banner.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.banner-sub {
  font-size: 24px!important;
  font-family: 'Hind', sans-serif!important;
  font-weight: 400;
  padding-top: 200px;
}
#anchor-icon {
  padding-bottom: 30px;
}

<div id="banner-wrap">
  <div id="banner" class="container">

    <!--  <div class="banner-bg-img">
            <img src="images/banner.png" />
        </div>-->

    <div id="banner-content">
      <div class="banner-title">Quality assurance through planning
        <div class="banner-sub">Nationwide leaflet distribution and sample delivery</div>
      </div>


      <div class="section group banner-icons">
        <div class="col span_1_of_4">
          <img src="images/icon1.png" />
        </div>
        <div class="col span_1_of_4">
          <img src="images/icon2.png" />
        </div>
        <div class="col span_1_of_4">
          <img src="images/icon3.png" />
        </div>
        <div class="col span_1_of_4">
          <img src="images/icon4.png" />
        </div>
      </div>

      <div id="banner-button"> <a href="#" class="ghost-button">WHY CHOOSE US</a>
      </div>
      <div id="anchor-icon">
        <a href="#">
          <img src="images/down-icon.png" />
        </a>
      </div>

    </div>

  </div>
</div>

Answer 4

Span 元素默认有display:inline，所以padding 不影响它。你必须给 display:inline-block 或 display: block 元素（.banner-sub）。

Answer 5

#banner-wrap{
    text-align: center;

}
.banner-title{
    position:absolute;
    padding-top: 75px;
    padding-bottom: 40px;
    color:#ccc;
    font-size: 42px!important;
}
.banner-icons{
    position:absolute;
    width: 780px;
    margin: 0 auto!important;
    padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;

}
#banner-content{
    background-image:url('../images/banner.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;

}
.banner-sub{
font-size: 24px!important;
    font-family: 'Hind', sans-serif!important;
    font-weight: 400;
    padding-top:200px;

    }

#anchor-icon{padding-bottom: 30px;}