css - Bootstrap - padding in span makes it bigger -


    <div class="row">         <div id="cover" class="span12"></div>     </div>     <div class="row">         <div id="first_left" class="span6 left">             <h3>aa</h3>          </div>         <div id="first_right" class="span5">             ee         </div>     </div> 

and less:

#cover{     background: url('couv.jpg') no-repeat;     width: 960px;     height: 280px; }  h3{     color: #212121;     font-size: 18px;     font-weight: normal;     float: left;     text-transform: uppercase;     margin: 0 0 25px 0;     text-shadow: 1px 2px 2px #fff; }  .left{     background: url('grille.jpg');     padding: 15px; } 

the "first_right" span displays below first_left, , if 15px padding present. padding 15, first_left becomes 490px wide instead of 460px. why ? also, ok have padding on span if want nest more rows in ?

the default value box-sizing content-box. not include padding. padding extends width (if set) of element. need set border-box include padding , borders in element width.

.left{     background: url('grille.jpg');     padding: 15px;     box-sizing: border-box; } 

now width includes padding , borders.

read more box-sizing


Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -