Box model--width and height

The width and height of the box model is not the same as the width and height of the object we normally speak of, the width (width) and high (height) defined within the CSS, which refers to the content range filled in.

So the actual width of an element (width of box) = left border + Left box + Left padding + content width + right padding + right Border + right edge.

The height of the element is also the same.

Like what:

CSS code:

div{    width:200px;    padding:20px;    border:1px solid red;    margin:10px;    }

HTML code:

< Body >   < Div > text content </div></body>

The actual length of the element is: 10px+1px+20px+200px+20px+1px+10px=262px. The element box model can be viewed under Chrome browser, such as:

Box model--width and height