The difference between margin and padding

At present web2.0 has been recognized, because like to engage in web development people have to bite the bullet to learn web2.0 standards, one of the important is the new layout rules, div+css. Used to be basically table layout, this traditional way is simple and intuitive, but this new standard I learn often can not find the north. Oh, take today's example, a lot of friends must also have my situation, then I will collect some examples from the Internet, let a lot of people to eliminate this annoyance.

Case one:

The difference between padding and margin in CSS

margin outer margin Border border padding inner margin That is, set the margin, and the empty space he occupies will be outside the border. Setting padding the space in which he occupies is inside the frame, which is clearer to illustrate. For example, a, B two boxes, a code padding,b for margin, now we look at the distance between a arrow and the blue border, this is padding called the inner margin, and then take a look at the outside B arrow and B before the distance is what we call margin, called the outer spacing, Haha you should understand now, what is padding, what is margin? Oh Case TWO: Look at the CSS box model! Margin is the distance between the div and the surrounding elements padding is the distance from the div inside the div

The difference between margin and padding