CSS填充不适用于父div

Question

I really don't understand CSS :(

Why is the following padding not pushing out the size of the parent 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#

Any help appreciated for this CSS noob.

Thanks

Answer 1

span is not a block element.

padding will not work for inline elements. But margin will work.

• either you can use margin: 20px 18px; or
• add display:block; or display:inline-block; to the span.

padding will take effect once you make it a block element.

Answer 2

Unlike div , p ¹ which are Block Level elements which can take up padding or margin on all sides, span ² cannot as it's an Inline element which takes up padding or margin horizontally only.

From the specification :

Use div instead of span ...below code will work

.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>

Answer 3

Just replace that both css with following, it may help you :-

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

Answer 4

Your html needs to be wrapped in a "container" class division tag with 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>

Also, your CSS can be reduced for what you have currently as shown below.

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

By default a span is an inline element. You cannot add padding top or bottom to it unless you add display:block .

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

Working code example: http://www.bootply.com/kSh1hNCkTb#