Display property
We can explain through the live examples. we create two div and span than we write class on this. like box & box1.
display : inline ;
if we write display : inline ; than check output...... before and after.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS display</title>
<style>
* {
margin: 0;
padding: 0;
}
.box { // before set display inline.
border: 2px solid red;
}
</style>
</head>
<body>
// div box
<div class="box box1">hellooo how are you ?</div>
<div class="box">klajsdas</div>
<span>sdfsdfsdf</span>
<span>sdfsdfsdf</span>
</body>
</html>
output :
so span tag is inline tag but div tag is not inline beacause it is a block tag. it takes whole width. but span not take whole width ok...
if we write display ; inline into the box than .....
.box {
border: 2px solid red;
display: inline;
}
output :
and we give width : 200 px so it not working. and also in case of padding....
.box {
border: 2px solid red;
display: inline;
width: 200px;
}
output : same as above
but we write display : inline-block ; than problem will be solved..
.box {
border: 2px solid red;
display: inline-block;
width: 200px;
padding: 45px;
}
output :
display : flex ;
if we write display flex on box1 class than show ooutput ...
.box {
border: 2px solid red;
display: inline-block;
width: 200px;
padding: 45px;
}
.box1 {
display: flex;
}
output : it takes 1000% width..
.box1 {
display: flex;
justify-content: center;
}
output : box1 class content show in the center.
display : none ;
.box1 {
display: flex;
justify-content: center;
display: none;
}
output : space of tag will not show.
.box1 {
display: flex;
justify-content: center;
visibility: hidden;
}
output : we dont show tag but space of tag not remove.
Position property
by defalut all the element have position : static ; value. we learn through the examples.
position : relative ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 2px solid rgb(255, 10, 10);
height: 215px;
width: 80vw;
padding: 3px;
margin: 3px;
}
.box1 {
background-color: aqua;
}
.box2 { // we set position here for box 2.
background-color: rgb(11, 24, 24);
position: relative;
top: -50px;
left: 50px;
}
.box3 {
background-color: rgb(20, 175, 253);
}
.box4 {
background-color: rgb(204, 255, 38);
position: relative;
left: 50px;
top: 0px;
}
.parent {
border: 2px solid purple;
margin: 45px;
padding: 45px;
}
</style>
</head>
<body>
<!-- by default position : static ; hoy okk -->
<div class="parent">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>
output : we show this set relative to the upper element.
so....
