css record

Original link: http://www.cnblogs.com/dusihan/p/10131847.html

padding

padding-top frame is in the green, 20 down from the top to the pixel location, a default is 0 padding-top, red border of 20 pixels high by padding-top attribute, adds a top 20 pixels, then the top of 40 pixels high, a minimum of 0, a negative number is not valid, because he is within the margin properties

padding-bottom: 20px pixel is added to the bottom 20 downward, this overlapped portion can be seen that the color was increased padding, bottom down to the bottom margin to increase the upper limit of the debug tool is very large, 3.35544e + 7px

padding-left: 20px to 20px from the left to the right to increase the minimum is 0px, 3.35544e + 7px upper limit

padding-right: 20px right to left to increase 20px, minimum 0px, 3.35544e + 7px upper limit

1  <div style="background-color: green;height: 100px;">
2         
3         <div style="height: 20px;background-color: red;padding-top: 20px">
4 
5         </div>
6     </div>

1 <div style="height: 20px;background-color: #9B1C2E;padding: 20px">

 

 

If you just write padding

Will be in the red box will be from the top, right, bottom, left pixel 20 sequentially increases in each side

 

margin

margin-top: a green border and up to the border began to add up 20px pixel, when reduced to a certain pixel, the green border will disappear, the largest increase in the upper limit 3.35544e + 7px

1 <div style="height: 20px;background-color: red;margin-top: 20px">

If you increase the border for the border: 1px property, so instead margin-left, it is in the green border, within the red border will shrink 20 pixels from the left to the right, up to a green border width,

Margin-right then the right to the left border reduced red pixel 20

margin-bottom bottom inside the red border increases toward the bottom of the green border

Reproduced in: https: //www.cnblogs.com/dusihan/p/10131847.html