-
Notifications
You must be signed in to change notification settings - Fork 0
/
tut20-BoxModel.html
38 lines (37 loc) · 1.92 KB
/
tut20-BoxModel.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box model</title>
<style>
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.model{
background-color: rgb(236, 245, 184);
/* margin: 50px 50px 50px 50px; /* top,right botttom left (clockwise)*/
margin: 10px 50px; /* top,right botttom left (clockwise)*/
padding: 20px 20px 20px 20px; /* top,right botttom left (clockwise)*/
border:14px groove rgb(250, 233, 3);
border-radius: 20px;
width: 500px;
}
</style>
</head>
<body>
<h2>Box Model</h2>
<div class="model">
<p id="first">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio asperiores error numquam magni. Repellendus debitis est modi quasi corrupti autem eaque quidem voluptatibus, quae deserunt. Exercitationem, ratione eveniet, enim aliquid veniam incidunt eligendi magni similique eum tempora quia distinctio atque?</p>
</div>
<div class="model">
<p id="second">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio asperiores error numquam magni. Repellendus debitis est modi quasi corrupti autem eaque quidem voluptatibus, quae deserunt. Exercitationem, ratione eveniet, enim aliquid veniam incidunt eligendi magni similique eum tempora quia distinctio atque?</p>
</div>
<div class="model">
<p id="third">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio asperiores error numquam magni. Repellendus debitis est modi quasi corrupti autem eaque quidem voluptatibus, quae deserunt. Exercitationem, ratione eveniet, enim aliquid veniam incidunt eligendi magni similique eum tempora quia distinctio atque?</p>
</div>
</body>
</html>