html 边距等于父节点,css的百分比margin,padding为什么不是相对于父元素的？

假设inner把padding–top设为60%，那它的高度就等于上内边距，等于自身宽度的60%(因为它是block，宽度和父级宽度相等)，position设为relative。

把section元素的position设为absolute，宽高都是100%。那么它内部的元素内边距和外边距的百分比虽然相对于父级section的宽度，但因为section宽高比已知，可以换算出来。

假设我们要实现的h2元素margin-left是父级宽度的10%，margin-top是父级高度的10%。

代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

*{

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

}

.container{

width:500px;

}

.inner{

position:relative;

padding-top:60%;

background:#EEE;

}

section{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

h2{

width:80%;

height:80%;

margin:0;

margin-top:6%;//因为高度是宽度的60%，所以高度的10%就是宽度的6%

margin-left:10%;

background:#09C;

}

span{

display:block;

float:left;

width:50px;

height:30px;

border:1px solid #09C;

color:#FFF;

background:#333;

font-size:14px;

text-align:center;

line-height:30px;

}

结果：

中间那块区域(64个格子组成的长方形)的margin-top是高度的10%，margin-left是宽度的10%；