html - CSS 填充不适用于父 div

Question

我真的不懂 CSS :(

为什么下面的 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 菜鸟的任何帮助表示感谢。

谢谢

Answer 1

不同于div，p ¹ 是Block Level可以在所有边上占用 padding 或 margin 的元素，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>