|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
|
2 <html><head> |
|
3 <style type="text/css"> |
|
4 p { margin: 0px; } |
|
5 ul { border: 2px solid blue; } |
|
6 li { border: 5px solid transparent } /* prevent margin collapsing */ |
|
7 .test1 |
|
8 li |
|
9 { margin-bottom: 30px; } |
|
10 .test2 |
|
11 li |
|
12 { margin-top: 30px; } |
|
13 .test3 |
|
14 li |
|
15 { margin-top: 30px; margin-bottom: 30px; } |
|
16 .test4 |
|
17 li |
|
18 { margin-top: 20px; margin-bottom: 10px; } |
|
19 .test5 |
|
20 li |
|
21 { margin-top: -10px; margin-bottom: 10px; } |
|
22 </style> |
|
23 </head> |
|
24 <body> |
|
25 <ul class="test1"><li><p>P (30px bottom margin)</p></li></ul> |
|
26 |
|
27 <ul class="test2"><li><p>P (30px top margin)</p></li></ul> |
|
28 |
|
29 <ul class="test3"><li><p>P (30px top+bottom margin)</p></li></ul> |
|
30 |
|
31 <ul class="test4"><li><p>P (20px top and 10px bottom margin)</p></li></ul> |
|
32 |
|
33 <ul class="test5"><li><p>P (-10px top and 10px bottom margin)</p></li></ul> |
|
34 </body> |
|
35 </html> |