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

回答

相关问题