HTML css--margin and Padding's beginner

The following is from the study of HTML css--margin and padding, author Fengyv, but added some personal views.

You are learning margin and padding when you are ignorant,--what his Niang inner margin, what his niang margin. Oh ah, at first I also a bit do not understand, and later through the study of information learning finally figured out, and now I will talk about their own margin and padding understanding:

First, what is the margin

The margin in CSS refers to the distance (or space) between the current element border and the other elements surrounding it border.

Second, what is the inner margin, what is the outer margin. (in the code to illustrate)

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >{margin:0px; }. Test1{width:200px;Height:200px;Border:10px solid Red; }. Test2{Margin-top:50px;Padding-top:50px;width:200px;Height:200px;Border:10px Solid Gray; }. Test2_son{width:80px;Height:100px;Border:20px Solid Blue; }</style>

(The following is a detailed explanation of the running results, as shown below:)

(it should be easy to understand what the author is going to write in the next paragraph)

① margin: Margin refers to the margins action element (here is the div with the class value of Test2 ) Border epitaxial distance another element border epitaxy (if another element and the margin action element sibling (here is the class value of test1 div) or inline (if another element is a margin action element parent (This is not understood???). )) distance, as in;

② padding: The padding refers to the margin effect element (here is the div with the class value of Test2) the distance from the border extension of its child elements, such as;

③ padding and margins are for the elements and other elements in which the inner margin of an element may appear to be margin in another element, such as: The padding of the class value test2 Div is in the class value Test2_test (the author is wrong, should be Test2_son) div element appears to be the margin, so the above code can also write: The class value is Test2 in the div style list "padding-top:40px;" Remove, the class value is Test2_test(ibid.) div element added "margin-top:40px;" -This is the same effect as the code 2-1(example) .

Iii. attribute values for margin and padding

① their default values are 0, their property values can be auto--margin by the browser to calculate the margin, padding the elements of the action by the browser to calculate the padding, you can set the property value for inherit and inherit the parent element margin-- Margin inherits the parent element margin, padding inherits the inner margin of the parent element, but because inherit is not supported in any version of Internet Explorer (including IE8), there is no need to learn.

②margin allows you to specify a negative margin value, but be careful when you use it, and padding does not allow you to specify a negative margins value.

The attribute values for ③margin and padding can have one, 2, 3, and 4:

HTML css--margin and Padding's beginner