CSS Layout – display: inline-block in CSS in Hindi

CSS

Display: inline-block in CSS In Hindi – Is Tutorial Me Hamne Display Property Ki inline-block Value With Example Explain Kiya Hai |

Hmne CSS Display Property Me Dekha Tha Ki Inline Element Vo Element Hote Hai Jo Nyi Line Se Start Na Ho Kar Same Line Me Hi Start Hote Hai Aur Jintni Width Ki Need Hai Utni Hi Width Lete Hai | Jabki Block Element Vo Element Hote Hai Jo Nyi Line Se Start Hote Hai Aur Full Width Lete Hai |

Display Property Ko Dang Se Samjhne Ke Liye CSS Display Tutorial Ko Read Kar Skte Hai |

inline-block in CSS In Hindi

Jab Kisi Element Ke Liye display : inline Set Kiya Jata Hai To Vah Element Inline Ho Jata Hai , Inline Element Ke Liye Ham Width Aur Height Set Nhi Kar Skte |

Jab Kisi Element Ke Liye display : block Set Kiya Jata Hai To Vah Element block Element Ban Jata Hai , Block Element Ke Liye Ham Width Aur Height Set Kar Skte |

Example : Is Example Ke Through Ham display : inline Aur display : block Me Difference Smjhenge

 <!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: hotpink; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: hotpink; 
}
</style>
</head>
<body>

<h1>Master Programing CSS inline-block Tutorial</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet 
  consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl 
  sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet 
  consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl
  sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

</body>
</html>

Output :

Output Me Hmne Dekha Ki inline Value Ke Liye height And width Property Ka Koi Effect Nhi Hua |

The display: inline-block Value

Jaisa Ki Nam Se Pta Chal Rha Hai Yah Inline And Block Dono Ka Mixture Hai , Matalab Isme Dono Value Ka Impact Hoga

Inline Value Ki Vajah Se Element Same Line Me Start Hoga Aur Utni Hi Width Lega Jitni Us Element Ko Need Hai , But Block Value Ke Vajah Se Ham Us Element Ke Liye Height , Width Etc Set Kar Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: hotpink; 
}

span.c {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: hotpink; 
}
</style>
</head>
<body>

<h1>Master Programing CSS inline-block Tutorial</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet 
  consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl
  sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
  consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida
  nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. 
</div>

</body>
</html>

Output :

Using inline-block to Create Navigation Links

display : inline-block Ko Behatar Samajhane Ke Liye Ek Navigation Links Create Krte Hai , Jisme Dekhenge Ki inline -block Value Kese Use Ki Ja Skti Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
  background-color: black; 
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
  
}
.nav li a{
  color : white;
  text-decoration :none;
}
.nav li:hover{
  background-color : red;
}
</style>
</head>
<body>

<h1>Horizontal Navigation Links</h1>

<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#service">Services</a></li>
  <li><a href="#about">About Us</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>

</body>
</html>

Output :

Leave a Reply

Your email address will not be published. Required fields are marked *