CSS Box模型失败：总宽度保持在指定值

Question

I noticed the very strange(for me) behavior in Wordpress. Let's consider the following simple example. If I set the width to some value, in my example 200px; and specify the border to 1px, the total width of element (ie. content + padding + border) remains 200px.

According to Box Model - http://www.w3.org/TR/CSS2/box.html , if I specify with to 200px, and border to 1px, total width must be 202px(if no paddings are specified). But in Wordpress( tested in version 3.6) it remains 200px. The content becomes 198px, so 198 + 2 = 200

Example

<div id="test">.</div>

#test {
display:block;
width:200px;
border:1px solid red;
background-color:black;
}

If I increase the value of border, for example set it to 4px, the content will become 192px, so total width always remains 200px;

How this can be explained, and how to restore default behavior?

Answer 1

Meet the box-sizing .

In your case there's box-sizing: border-box; set either to all elements ( * ) or to that particular div .