CSS填充，不向父母DIV

爲什麼以下padding沒有推出父div的大小？

HTML

<div class="lead-table"> 
     <div class="row table-head-1"> 
      <div class="col-md-9"> 
       <span><strong>My Leads</strong></span> 
      </div> 
     </div> 
    </div>

CSS

.lead-table .table-head-1 { 
     background-color: #053449; 
     text-transform: uppercase; 
     color: #ffffff; 
     font-size: 12px; 
    } 
    .lead-table .table-head-1 span { 
     padding: 20px 18px; 
    }

http://www.bootply.com/gsT2mwsA8h#

任何幫助讚賞這個CSS noob。

感謝

來源

2015-11-19 SynackSA

跨度是非塊元素。您是否嘗試過.lead-table .table-head-1跨度{padding：20px 18px;顯示：inline-block; } – HADI

不同於div，p 其是這可能需要長達在所有側面padding或marginBlock Level元件，span 不能因爲它是一個Inline元件這需要只能水平放置padding或margin。

從specification：

使用div而不是span ...下面的代碼將工作

.lead-table .table-head-1 { 
    background-color: #053449; 
    text-transform: uppercase; 
    color: #ffffff; 
    font-size: 12px; 
} 
.lead-table .table-head-1 .col-txt{ 
    padding: 20px 18px; 
} 


<div class="lead-table"> 
    <div class="row table-head-1"> 
     <div class="col-md-9"> 
      <div class='col-txt'><strong>My Leads</strong></div> 
     </div> 
    </div> 
</div>

來源

2015-11-19 05:07:47

只需更換這兩個CSS與以下，它可以幫助你： -

.lead-table .table-head-1 { 
    background-color: #053449; 
    text-transform: uppercase; 
    color: #ffffff; 
    font-size: 12px; 
    padding: 20px 18px; 
}

來源

2015-11-19 04:59:58

你的HTML需要被包裹在自舉的「容器」的階級劃分的標籤。

HTML：

<div class="container"> 
<div class="lead-table"> 
    <div class="row table-head-1"> 
     <div class="col-md-9"> 
      <span><strong>My Leads</strong></span> 
     </div> 
    </div> 
</div> 
</div>

而且，你的CSS可以減少你有什麼當前，如下圖所示。

CSS：

/* CSS used here will be applied after bootstrap.css */ 
.lead-table{ 
    background-color: #053449; 
    text-transform: uppercase; 
    color: #ffffff; 
    font-size: 12px; 
} 
.table-head-1{ 
    padding: 20px 18px; 
}

來源

2015-11-19 05:00:11

span不是塊元件。

padding將不適用於內聯元素。但margin將工作。

要麼你可以使用margin: 20px 18px;或
添加display:block;或display:inline-block;的跨度。

padding將在您將其設置爲塊元素後生效。

來源

2015-11-19 05:01:31

默認情況下，跨度是內聯元素。除非添加display:block，否則不能添加填充頂部或底部填充。

.lead-table .table-head-1 span { 
    padding: 20px 18px; 
    display:block; 
}

工作代碼例如：http://www.bootply.com/kSh1hNCkTb#

來源

2015-11-19 05:02:26

CSS填充，不向父母DIV

回答

相關問題