The default CSS attribute values of the FORM and its friends in different browsers are inconsistent.

The default CSS attribute values of the FORM and its friends in different browsers are inconsistent.

 

We usually need to define CSS that removes the default HTML Tag style when defining CSS styles, because the default styles shown in different browsers are inconsistent, we need to ensure that they can display the expected results in different browsers, so we need to re-define the styles for these inconsistent labels, let them unify the CSS styles in different browsers, and then define them accordingly.

Next we will take the FROM and its friends (input, fieldset, button, etc.) for a simple experiment. It mainly compares Microsoft IE8, Firefox FF, and Google Chrome. The default values may be different from those in the following table in other browsers. This table shows that most of these HTML tags are inconsistent in different browsers. the CSS solution is provided below.

Form in standard mode
Element	IE8	FF	Chrome
Form	In the weird mode, by default, from will have margin-bottom: 16px;
INPUT [type = text]	Padding: 1px; Border-width: 2px;	Padding: 2px; Border-width: 1px;	Padding: 1px; Border-width: 2px;
INPUT [type = checkbox]	Padding: 3px;	Margin: 3px; Margin-left: 4px;	Margin: 3px 3px 3px 4px;
INPUT [type = radio]	Padding: 3px;	Margin: 3px 3px 0 5px;	Margin: 3px 3px 0 5px;
INPUT [type = submit]	Padding: 1px 8px; Border-width: 3px;	Padding: 0 6px; Border-width: 3px;	Padding: 1px 6px; Border-width: 2px;
Button	Padding: 1px 8px; Border-width: 3px;	Padding: 0 6px; Border-width: 3px;	Padding: 1px 6px; Border-width: 2px;
Fieldset	Padding: 0 2px; Border-width: 2px; Margin: 0 2px;	Padding: 5px 10px 12px; Border-width: 2px; Padding: 0 2px;	Padding: 5px 12px 2px; Border-width: 2px; Margin: 0 2px;

 

Solution to unify the default CSS style of HTML tags:

  body,form,input, button,fieldset {    margin:0;    padding:0;  }

The above Code does not re-define the border-width style, because we seldom use the default border color. Generally, the border size is defined directly, for example: border: 1px solid red;

Some websites that have gone through the HTML Tag exactly define a reset.css file, and some of them contract with other files in one file, such as base.css.

The CSS code above is only a small part of the default style for reset. It is hoped that this article will allow the front-end friends of the new row to have some knowledge about this reset, and to know why and why it can be better, easy to write code.