填充和边距不起作用

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 class。

.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

#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 4

Span 元素默认有 display:inline，所以 padding 不会影响它。您必须给 display:inline-block 或 display: block 元素 (.banner-sub).

Answer 5

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

现在针对您的问题您可以做什么。我建议在 span 上进行一些更改，而不是快速修复（使用内联块）。正如我在上面的代码中看到的那样，您使用了 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>

填充和边距不起作用

Padding and Margin not working

html

css

structure

margin

padding