The standard box model:
- Margin (margins) - clear the area outside of the frame, it is transparent from the outside.
- Border (Borders) - around the inner and outer margins content border.
- Padding (padding) - clear the area around the content, padding is transparent.
- Content (content) - the contents of the box to display text and images.
The final total width of element calculation formula is as follows:
width = width + left padding + right padding + left border + right border + left margin + from the right side of the total element
element overall height of the final formula is as follows:
the height of the total element = height of the apex filler + + + filler + margin on the bottom border of the lower frame + the margin +
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="250x250px.gif" width="250" height="250" />
<div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div>
</body>
</html>
