Question

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

这是网站的一部分没有响应css的jsfiddle。

我正在尝试在.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

您在span上应用了类.banner-sub，这是一个内联元素，因为您的类.banner-sub没有设置任何显示属性，默认情况下显示：inline将在span上设置为内联element.width padding margin不适用于内联元素（如果你想知道为什么请看这个What is inline , block and Inline-block in css。）

现在针对您的问题，您可以做些什么。我会建议几个更改而不是快速修复（使用内联块）跨度。正如我在上面的代码中看到的那样你使用了h1标签（默认字体大小：24px;），但你用css中的font-size 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

#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;}

Answer 5

默认情况下，Span元素为display:inline，因此padding不会影响它。您必须提供display:inline-block或display: block元素（.banner-sub）。

填充和边距不起作用

5 个答案: