Default attribute values of common labels and their interaction -- Thoughts on CSS reset

In the current website design, it is very common to use reset.css to reset the CSS attribute of the tag of the entire site. However, sometimes we have reset for reset, and we often see this reset code.

{:;:;}{:;   }

In fact, most CSS Resets are unnecessary. If you write more, it will only increase the burden on the browser in rendering the page. Of course, some students may say that CSS reset is meaningless. I also admit that, however, we can avoid excessive reset by understanding the default values of CSS attributes of some labels.

Default Value of tag Properties

Since most CSS Resets are for padding, border, and margin, Let's first look at the default values of these three attributes of common tags (Chrome)

Tag	Padding	Border	Margin

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Although it is only in Chrome, it can be seen from the above table that the default padding, border, and margin values of many labels are 0. If I write them again in the CSS reset, It is not superfluous, in addition to the default browser values, there are also some tag attributes worth noting.

Width, height, padding, margin

Let's look at an example.

        123456789123456789                123456789    

 

For the elements located in absolute and fixed, if the top, left, bottom, and right values are set, the margin attribute does not work.

For elements located in absolute and fixed, if the top, left, bottom, and right values are set, the float attribute will also become invalid.

If the block element is set with the float attribute or absolute or fixed positioning, the vertical-align attribute no longer works.

Others

In general, block elements such as width: 100% and pre are rarely used. When I use them, I can write them on the page without adding them to the reset so that all pages can be loaded.

Example

Let's take a look at how Eric Meyer writes CSS reset.

{:;:;:;:;:;:;}{:;}{:;}{:;}{:;}{:;:;}{:;:;}

 

The write is simplified, but I feel that some of the labels that are not commonly used can be removed.

{:;:;:;:;:;:;}{:;}{:;}{:;}{:;}{:;:;}{:;:;}

 

If you are interested in CSS reset, you can refer to http://www.cssreset.com/. there are many popular CSS reset statements.