填充和保證金不起作用

這是我在整個網站中遇到的一個問題，我不確定如何解決它。當我嘗試向某些元素添加填充或邊距時，它們就不起作用。填充和保證金不起作用

這是一個jsfiddle的部分網站，沒有響應的CSS。

我試圖填充添加到.banner子的頂部，但填充只是重疊上述因素並沒有把它下來。

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>

來源

2015-10-16 5kud

跨度元素有display:inline默認所以padding不會影響它。您必須給display:inline-block或display: block元素（.banner-sub）。

來源

2015-10-16 10:56:24 Alex

添加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

來源

2015-10-16 10:49:58

設置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

來源

2015-10-16 10:50:19

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

來源

2015-10-16 10:50:45

https://jsfiddle.net/Hussy/c2f0rm1s/ –

您正在將類.banner-sub應用於作爲內聯元素的span，因爲您的類.banner-sub沒有設置任何顯示屬性，默認情況下顯示：inline將設置爲span inline element.width padding margin不適用於內聯元素（如果您想知道爲什麼請參閱此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>

來源

2015-10-16 11:17:12 imGaurav

填充和保證金不起作用

回答

相關問題