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.
Comments
Post a Comment