CODEWITHSUNDEEP
csswebtwitter-bootstrap-3
luffyzc
luffyzc

Reputation: 21

why the width of col in bootstrap include padding

According to the W3school, heigh and width does not include padding and margin, however ,in the bootstrap, the col--, let's say, col-md-3 will set the width= 25%, but this include the padding ,why? 

<div class="text-center">
<div class="row">
    <div class="col-md-4">
        <div class="well">.col-md-4</div>
    </div>
    <div class="col-md-4">
        <div class="well">.col-md-4</div>
    </div>
    <div class="col-md-4">
        <div class="well">.col-md-4</div>
    </div>
</div>
</div>

the width of each col is 33.33%*width of row =436.67px,

the width of col

the layout of col

according to the layout of each col, we can see that the actual width(436.67px) =padding + width of content. i thought the content width should be 436.67px? why am i wrong?

Upvotes: 1

Views: 471

Answers (1)

rhgb
rhgb

Reputation: 4205

In bootstrap css there is a rule:

* {
    box-sizing: border-box;
}

Under that rule the width is calculated with content width + border + padding. See this article

Upvotes: 1

Related Questions