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

span不是块元素。

padding不适用于内联元素。但是margin会有用。

您可以使用margin: 20px 18px;或
将display:block;或display:inline-block;添加到范围。

padding一旦你成为一个块元素就会生效。

Answer 2

与p不同，padding ¹是Block Level个元素，可以在所有方面占用margin或span， padding ²不能，因为Inline元素只能水平占用margin或div。

来自specification：

使用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> ...代码可以正常使用

{{1}}

Answer 3

只需将这两个css替换为以下内容，它可能会对您有所帮助： -

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

Answer 4

您的html需要包含在带有bootstrap的“容器”类分区标记中。

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

Answer 5

默认情况下，span是内联元素。除非添加display:block，否则无法在其顶部或底部添加填充。

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

工作代码示例：http://www.bootply.com/kSh1hNCkTb#

CSS填充不适用于父div

5 个答案: