-
Notifications
You must be signed in to change notification settings - Fork 9
/
CSS Display Property.html
74 lines (69 loc) · 2.22 KB
/
CSS Display Property.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
<!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>Css display property</title>
<style>
img {
margin: auto;
width: 34px;
display: block;
}
h3 {
text-align: center;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
margin: 0px;
}
.box {
box-sizing: border-box;
border: 2px solid red;
background-color: blanchedalmond;
margin: auto;
width: 1200px;
}
.container{
border: 23px;
background-color: yellow;
width:auto;
box-sizing: border-box;
display: inline-block;
margin: 20px;
padding: 29px;
}
</style>
</head>
<body>
<div class="box">
<img src="D:\Pictures\Screenshot_20220719_013531 (1).jpg" alt="" />
<h3>Welcome to the Adil's Blog</h3>
</div>
<div class="container">
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque,
voluptatum iure possimus voluptatibus est odio consectetur accusamus rem
aut. Commodi alias nostrum dolores.
</h3>
</div>
<div class="container">
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quae
eligendi dolorem pariatur culpa, doloremque quam maiores ad architecto
labore unde, dolores cumque suscipit incidunt necessitatibus accusantium
sunt optio nam. Enim necessitatibus, placeat natus consectetur fuga
dolores consequuntur eius dolorem architecto cupiditate libero.
</h3>
</div>
<div class="container">
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus
facilis, ab praesentium saepe hic accusamus quos fugiat fugit natus
inventore rem aliquid at commodi modi esse ex molestias ipsum
consectetur odit, laboriosam excepturi cumque aut! Velit impedit nihil
et fugiat voluptatibus adipisci vero.
</h3>
</div>
</body>
</html>