-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmargin_padding.html
67 lines (63 loc) · 2.21 KB
/
margin_padding.html
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
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./style/reset.css" />
<link rel="stylesheet" type="text/css" href="./style/main.css" />
</head>
<body>
<div>
<h4 class="bold m-bottom10">Inline:</h4>
<span class="m20 bc-blue">Margin</span>
<span class="p20 bc-blue">Padding</span>
<div style="display: none">
<br>
<br>
<span class="m20 bc-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce vitae tincidunt leo, vitae vulputate est.
Ut ac velit interdum metus ultricies dapibus sit amet quis arcu.
Pellentesque iaculis mi vel lacus hendrerit, vitae lobortis enim tincidunt.
</span>
<br>
<br>
<br>
<span class="p20 bc-blue">
In tristique sagittis tellus quis condimentum.
Integer tempor semper magna, et molestie magna imperdiet eu.
Sed varius porttitor augue a lacinia. Integer dignissim ipsum purus, eu volutpat ex accumsan tempus.
Quisque mi risus, tincidunt in fermentum sit amet, consectetur nec ante.
</span>
</div>
<div class="inline-block w-max">
<h4 class="bold m-bottom10 m-top30">Inline-block:</h4>
<span class="inline-block m20 bc-yellow">Margin</span>
<span class="inline-block p20 bc-yellow">Padding</span>
</div>
<h4 class="bold m-top10">Block:</h4>
<div class="p20 bc-green">Padding</div>
<p class="m-top30">Collapsing Margins:</p>
<div class="h50 m20 bc-red"></div>
<div class="h50 m20 bc-blue">
<div class="h50 m30 bc-green"></div>
</div>
<br/>
</div>
<div>
<p>Collapsing does not work:</p>
<div>
<div class="inline-block m10 border bc-red">
<!--inline-block-->
<div class="h50 w200 bc-green m10"></div>
</div>
</div>
<div class="relative">
<div class="absolute m10 p10 bc-blue">
<!--absolute-->
<div class="h50 w200 bc-yellow m10"></div>
</div>
</div>
</div>
</body>
</html>