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

Source: Internet
Author: User

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.

    Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.