The difference between class and ID in CSS, margin and padding

Core tips: Class can be reused and IDs can only be used once in a page. It is possible that using the same ID repeatedly in a large number of browsers will not cause problems, but it is definitely wrong to use on the standard and is likely to lead to some real-world problems with browsers.

Class can be reused and IDs can only be used once in a page. It is possible that using the same ID repeatedly in a large number of browsers will not cause problems, but it is definitely wrong to use on the standard and is likely to lead to some real-world problems with browsers.

These two differences are relatively easy to confuse the problem, especially class and ID, I believe many people did not carefully understand the difference. Here are some of my understandings:

1. The difference between class and ID

A class is used to define one or more elements based on user-defined criteria. A more appropriate analogy is the script: A class can define the story lines of each character in the script, and you can use this class by Css,javascript. So you can use class= "Frodo" on one page, class= "Gandalf", class= "Aragorn" to distinguish different story lines. It is also very important that you can use any number of classes in a document.

As with IDs, it is often used to define a single mark on the page that appears only once. In a structured layout of page layouts (for example, usually a page is made up of a header, a header, a content area, and a footer), it is generally ideal to use IDs because an ID can only be used once in a document. These elements rarely appear more than once on the same page.

The sentence is: class can be used repeatedly and IDs can only be used once in a page. It is possible that using the same ID repeatedly in a large number of browsers will not cause problems, but it is definitely wrong to use on the standard and is likely to lead to some real-world problems with browsers. (Just tried it in Dreamweaver, yes, no mistake)

In practical applications, class may be useful for text typesetting, and ID is useful for macro layout and design placement of various elements.

2. The difference between margin and padding

Margin and padding are used to separate elements, the margin is separated from the outside, and the padding is a separate element inside. Plainly, one is the internal distance, one is the outer distance; padding: inner margin; margin: outer margin.

Both are in place of the most important role of the table-> segmentation of a good method, the difference is that margin is different from each other in the tag between the distance and padding is the same element of different content segmentation, which is the most clearly seen in the table. Especially when the background style is loaded on an area, the content background color under padding changes, and margin does not change.

Margin values are: margin-top, Margin-right, Margin-bottom, Margin-left

Padding values are: Padding-top, Padding-right, Padding-bottom, Padding-left

Simple writing (for example):

All four margins are 10px:

h1 {margin:10px}

The top margin and the bottom margin are 10px, and the left and right margins are 2% of the width of the parent element:

H1 {margin:10px 2%}

The top margin is 10px, the left and right margins are 2% of the width of the parent element, and the bottom margin is -10px:

H1 {margin:10px 2% -10px}

The top margin is 10px, the right margin is 2% of the width of the parent element, the bottom margin is -10px, and the left margin is set by the browser:

H1 {margin:10px 2% -10px Auto}