-
Notifications
You must be signed in to change notification settings - Fork 0
/
20.html
86 lines (72 loc) · 3.82 KB
/
20.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!-- code to understand display property -->
<!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>Display property</title>
</head>
<style>
.class1 {
/* magin auto puts equal space to the left and right of the element thus bringing it to the middle,wont work here as p is a block element so it already takes full space */
border: 2px solid red;
/*check the border,it takes the full psace so margin wont work till now*/
/*Solution: We can set width of block element*/
width: 369px;
margin: auto;
}
img {
margin: auto;
/* The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
When we use display:block it will override the default way and display the image in middle*/
display: block;
width: 75px;
}
h3 {
text-align: center;
}
.class3 {
background-color: aqua;
border: 2px solid black;
margin: 15px;
padding: 15px;
display: inline-block;
width: 369px;
box-sizing: border-box;
}
.class2 {
margin: 20px;
}
</style>
<body>
<div class="class1">
<img src="profile.jpg">
<h3>Welcome to my website</h3>
</div>
<div class="class2">
<p class="class3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis dolor odio, quidem ab
cumque pariatur
non, nulla magnam delectus laborum consectetur dicta deserunt error ea labore. Et incidunt ad dolorum
repellat error, vitae debitis?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quaerat
eveniet temporibus sint libero! Accusamus porro laudantium dolorum dolorem dicta ex unde, eaque minus earum
sapiente. Quo blanditiis provident laudantium dolores cumque reprehenderit sint cum necessitatibus, ducimus,
unde quae fugit aliquam corrupti repudiandae tempore debitis saepe sapiente nisi nam officiis.</p>
<p class="class3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis dolor odio, quidem ab
cumque pariatur
non, nulla magnam delectus laborum consectetur dicta deserunt error ea labore. Et incidunt ad dolorum
repellat error, vitae debitis?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quaerat
eveniet temporibus sint libero! Accusamus porro laudantium dolorum dolorem dicta ex unde, eaque minus earum
sapiente. Quo blanditiis provident laudantium dolores cumque reprehenderit sint cum necessitatibus, ducimus,
unde quae fugit aliquam corrupti repudiandae tempore debitis saepe sapiente nisi nam officiis.</p>
<p class="class3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis dolor odio, quidem ab
cumque pariatur
non, nulla magnam delectus laborum consectetur dicta deserunt error ea labore. Et incidunt ad dolorum
repellat error, vitae debitis?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quaerat
eveniet temporibus sint libero! Accusamus porro laudantium dolorum dolorem dicta ex unde, eaque minus earum
sapiente. Quo blanditiis provident laudantium dolores cumque reprehenderit sint cum necessitatibus, ducimus,
unde quae fugit aliquam corrupti repudiandae tempore debitis saepe sapiente nisi nam officiis.</p>
</div>
</body>
</html>