html - 填充和边距不起作用

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