1. Box Model - Width and Height
The actual width of an element (the width of the box) = left border + left border + left padding + content width + right padding + right border + right border
CSS:
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}HTML:
<body>
<div>文本内容</div>
</body>The actual length of the element is: 10px+1px+20px+200px+20px+1px+10px=262px.
2. Box model - padding, padding
2.1 The distance between the element content and the border can be set, which is called "filling". Fill can also be divided into top, right, bottom, left (clockwise).
div{padding:20px 10px 15px 30px;}2.2 The above code can be written separately:
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}2.3 If the top, right, bottom, and left padding are all 10px; you can write this:
div{padding:10px;}2.4 If the top and bottom padding is the same as 10px, and the left and right are the same as 20px, you can write as follows:
div{padding:10px 20px;}