position of a 'collapsed through' box

A series of test cases, each is wrapped in a container with gray horizontal lines in the background, top/bottom borders to avoid margins escaping.

Elements used in the test cases:


1 T margin-top: 10px

2 T margin-bottom: 10px

2b T margin-bottom: 10px, no P

3 T margin-top: 10px, P margin-top: 20px

4 T margin-bottom: 10px, P margin-top: 20px

5 T margin-top: 10px, C margin-top: 20px

6 T margin-bottom: 10px, C margin-bottom: 20px

1a T margin-top: 10px

2a T margin-bottom: 10px

3a T margin-top: 10px, P margin-bottom: 20px

4a T margin-bottom: 10px, P margin-bottom: 20px

5a T margin-top: 10px, C margin-top: 20px

6a T margin-bottom: 10px, C margin-bottom: 20px

7 T margin-top: 10px, C margin-bottom: 20px

8 T margin-bottom: 10px, C margin-top: 20px

9 T margin-top: 20px, C margin-top: 10px

10 T margin-bottom: 20px, C margin-bottom: 10px

11 T margin-top: 20px, C margin-bottom: 10px

12 T margin-bottom: 20px, C margin-top: 10px

13 T margin-bottom: 20px, margin-top: 10px

14 T margin-bottom: 20px, margin-top: 10px, E1 margin-bottom: 30px, E2 margin-top: 30px

15 T margin-bottom: 20px, margin-top: 40px, E1 margin-bottom: 20px, E2 margin-top: 10px

16 T margin-bottom: 40px, margin-top: 30px, E1 margin-bottom: 20px, E2 margin-top: 50px

17 C margin-bottom: 20px, margin-top: 10px

18 C margin-bottom: 20px, margin-top: 10px, E1 margin-bottom: 30px, E2 margin-top: 30px

19 C margin-bottom: 20px, margin-top: 40px, E1 margin-bottom: 20px, E2 margin-top: 10px

20 C margin-bottom: 40px, margin-top: 30px, E1 margin-bottom: 20px, E2 margin-top: 50px

Similar test cases, using a float child to reveal the position of a 'collapsed through' box

CSS tests home