What is CSS reset? Why should we use CSS reset? The reason is very simple, because different browsers may have different default values for the selector, such as the indent length and padding size. if not processed, the pages on different browsers may be different or even messy. therefore, CSS reset is required to reset and unify everything. the following describes several common CSS resets.
The first is a simple method to set padding, margin, and border of all elements to 0.
* {
Padding : 0 ;
Margin : 0 ;
Border : 0 ;
}
This is the simplest and safest method, but it also consumes the most resources. Therefore, it is not recommended.
Next is Yahoo! ResettingCode, Yahoo! Resetting eliminates inconsistencies in key HTML elements and selectively resets them. Compared with the previous method, resource consumption is much smaller, which is also one of the most commonly used methods.
Body, Div, DL, DT, DD, UL, ol, Li, H1, H2, H3, H4, H5, H6, pre,
Form, fieldset, input, textarea, P, BLOCKQUOTE, Th, TD {
Padding : 0 ;
Margin : 0 ;
}
Table {
Border-collapse : Collapse ;
Border-spacing : 0 ;
}
Fieldset, IMG {
Border : 0 ;
}
Address, caption, cite, code, dfn, em, strong, Th, VAR {
Font-weight : Normal ;
Font-style : Normal ;
}
OL, UL {
List-style : None ;
}
Caption, th {
Text-align : Left ;
}
H1, H2, H3, H4, H5, h6 {
Font-weight : Normal ;
Font-size : 100% ;
}
Q: before, Q: After {
Content : '' ;
}
Abbr, acronym { Border : 0 ;
}
Below are several other popular CSS resetting methods:
Eric Meyer reset CSS
HTML, body, Div, span, applet, object, IFRAME, table, caption,
Tbody, tfoot, thead, TR, Th, TD, Del, dfn, em, Font, IMG, INS,
KBD, Q, S, SAMP, small, strike, strong, sub, sup, TT, VAR,
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, pre, A, abbr,
Acronym, address, big, cite, code, DL, DT, DD, ol, UL, Li,
Fieldset, form, label, legend {
Vertical-align : Baseline ;
Font-family : Inherit ;
Font-weight : Inherit ;
Font-style : Inherit ;
Font-size : 100% ;
Outline : 0 ;
Padding : 0 ;
Margin : 0 ;
Border : 0 ;
}
: Focus {
Outline : 0 ;
}
Body {
Background : White ;
Line-height : 1 ;
Color : Black ;
}
OL, UL {
List-style : None ;
}
Table {
Border-collapse : Separate ;
Border-spacing : 0 ;
}
Caption, Th, TD {
Font-weight : Normal ;
Text-align : Left ;
}
BLOCKQUOTE: before, BLOCKQUOTE: After, Q: before, Q: After {
Content : "" ;
}
BLOCKQUOTE, Q {
Quotes : """" ;
}
Chris Poteet's reset CSS
* {
Vertical-align : Baseline ;
Font-family : Inherit ;
Font-style : Inherit ;
Font-size : 100% ;
Border : None ;
Padding : 0 ;
Margin : 0 ;
}
Body {
Padding : 5px ;
}
H1, H2, H3, H4, H5, H6, P, pre, BLOCKQUOTE, form, UL, ol, DL {
Margin : 20px 0 ;
}
Li, DD, BLOCKQUOTE {
Margin-left : 40px ;
}
Table {
Border-collapse : Collapse ;
Border-spacing : 0 ;
}
Tantek's CSS Reset
: Link,: visited {
Text-Decoration : None ;
}
Ul, ol {
List-style : None ;
}
H1, H2, H3, H4, H5, H6, pre, code, P {
Font-size : 1em ;
}
Ul, ol, DL, Li, DT, DD, H1, H2, H3, H4, H5, H6, pre,
Form, body, HTML, P, BLOCKQUOTE, fieldset, input {
Padding : 0 ;
Margin : 0 ;
}
A img,: link IMG,: visited img {
Border : None ;
}
Address {
Font-style : Normal ;
}
Refer:
A killer collection of global CSS reset styles
10 té cnicas para reset CSS
