HTML Css--margin and padding learning

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.

What is the inner margin and what is the margin?

Code Listing 2-1:

2. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4. < HTML xmlns="http://www.w3.org/1999/xhtml">

6. < Head >

8. < Meta http-equiv= "content-type" Content="text/html; Charset=utf-8 " />

10. < style type="text/css">

12. body{

14. margin:0px;

16. }

18. 
    

20. . test1{

22. width:150px;

24. height:150px;

26. BORDER:6PX solid red;

28. }

30. 
    

32. . test2{

34. margin-top:40px;

36. padding-top:40px;

38. width:150px;

40. height:150px;

42. Border:6px solid Gray;

44. }

46. 
    

48. . test2_son{

50. width:80px;

52. height:50px;

54. BORDER:12PX solid blue;

56. }

58. </ style >

60. </ Head >

62. < Body >

64. < P class="test1">test1</p>

66. < P class="test2">

68. < P class="Test2_son">test2_son</p >

70. </ P >

72. </ Body >

74. </ HTML >

Figure 01

Description: The gray area in figure Test2 is the bounding rectangle of P with the class value, which is width;

①, margin: margin refers to an element (here is the P 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 p) or the distance of the extension (if another element is the parent of the margin Action Element), as in;

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

③, padding, and margins are for the element and other elements that are acting on it, and the inner margin of an element may appear to be margin in another element, such as: Class value is Test2 The inner margin of P appears to be the margin in the class value Test2_test p element, so the above code can also be written like this: The class value is the P-style list in Test2 "padding-top:40px;" Remove, the class value adds "margin-top:40px" to the test2_test p element; --this effect is the same as code 2-1;

Iii. attribute values for margin and padding

①, their default values are 0, and 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 inherit the parent element margin by setting the property value to inherit-- 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 use caution; padding does not allow the designation of negative margin values;

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

A, margin has 4 attribute values (for example, margin:10px 5px 15px 20px;), which means: Upper margin 10px, right margin 5px, lower margin 15px, left margin 20px;

The padding has 4 attribute values (for example, padding:10px 5px 15px 20px;), meaning: top padding 10px, right inner margin 5px, lower inner margin 15px, left margin 20px;

Summary: Whether it is margin or padding, if there are 4 attribute values, then their direction of action clockwise to the upper, right, bottom, left;

B, margin has 3 attribute values (for example, margin:10px 5px 15px;), meaning: The top margin 10px, the right margin and the left margin 5px, the lower margin 15px;

The padding has 3 attribute values (for example, padding:10px 5px 15px;), meaning: top padding 10px, right inner margin and left inner margin 5px, lower inner margin 15px;

Summary: Whether it is margin or padding, if there are 3 attribute values, then their direction of action clockwise to the upper, right and left, lower;

C, margin has 2 attribute values (for example, margin:10px 5px;), meaning: top margin and bottom margin 10px, right margin and left margin 5px;

The padding has 2 attribute values (for example, padding:10px 5px;), meaning: the top and bottom padding 10px, the right padding and the left inner margin 5px;

Summary: Whether it is margin or padding, if there are 2 attribute values, then their direction of action clockwise to upper and lower, right and left;

D, margin has 1 attribute values (for example, margin:10px;), meaning: 4 margins are 10px;

Padding has 1 attribute values (for example, padding:10px;), meaning: 4 padding is 10px;

Summary: Whether it is margin or padding, if there are 1 attribute values, then the margin values are equal;