Learn CSS: optimize our CSS style sheet code

I have recently read SKIN CSS files created by many netizens and found many redundant codes. Next I will introduce how to clear redundant code to make your CSS file more concise.
I. Attributes of margin and padding
We can see from relevant information that margin and padding represent the external margin and internal padding distance. In the CSS of many netizens, the redundant code about these two attributes is the most common. For example: margin: 0px. You can check whether there are many margin: 0px in your CSS file, some of which are not needed. You can try to delete it, of course, not all margin: 0px are useless, the same is true for padding: 0px.
In addition, the order of attributes in margin and padding is: Upper right bottom left, you just need to remember that it is clockwise. Let's take a look at the two codes:
Margin: 0px 0px 0px 10px;
Margin-left: 10px;
In fact, they serve the same purpose. The following is an abbreviation. We can use the abbreviation to reduce CSS code and make it easier to read. (The same is true for padding .)
II ,! Important; attributes
! Important is a syntax defined in CSS1 to improve the application priority of a specified style rule. IE does not support this syntax, but other browsers support it. From this point, we can know that code with priority setting will not be executed by IE. Therefore, we can add CSS styles behind important to distinguish it from browsers such as IE and FireFox.
When I was reading the CSS code of Miles last time, I saw the following sentence:
Height: 50px! Important; height: 50px;
This is redundant. We can write the following code: height: 50px. This error also appeared when I first started making CSS.
III. text-align and font styles
I will not mention the role of these two styles, but these two styles also have a lot of redundancy in CSS of many netizens. The layer definition is as follows:
<Div id = "main">
<Div id = "body1">
<Div id = "content1">
</Div>
</Div>
<Div id = "body2">
</Div>
<Div>
The CSS file is as follows (error example ):
# Main {width: 500px; text-algin: left; font-size: 12px; color: #000000 ;}
# Body1 {width: 500px; text-algin: center; font-size: 12px; color: # FF0000 ;}
# Content {text-algin: left; font-size: 12px; color: #000000 ;}
# Body2 {text-algin: left; font-size: 12px; color: #000000 ;}