কম্পিউটার টিউটোরিয়াল

CSS-এ Display Block ব্যবহার


display প্রপার্টির মান block ব্যবহার করলে এলিমেন্ট নতুন লাইন থেকে শুরু হয় এবং পুরো প্রস্থ ধরে। তাই এলিমেন্ট ব্লক এলিমেন্ট হিসেবে প্রদর্শিত হয়।

উদাহরণ

CSS-এ display block বাস্তবায়ন উদাহরণ:

<!DOCTYPE html>
<html>
<head>
<style>
p { background-color: orange; color: white; }
p.demo1 { display: block; }
p.demo2 { display: inline-block; }
</style>
</head>
<body>
<h1>Match Details</h1>
<div> Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019. </div>
<hr />
<div> Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019. </div>
</body>
</html>

আউটপুট

CSS-এ Display Block ব্যবহার

আরেকটি উদাহরণ:

<!DOCTYPE html>
<html>
<head>
<style>
p { background-color: orange; color: white; }
p.demo { display: block; }
</style>
</head>
<body>
<h1>Student Result</h1>
<div> The result of MCA student will be declared on <p class="demo">20th Decemeber 2019</p>Check the website on the same day at 8PM. </div>
</body>
</html>

আউটপুট

CSS-এ Display Block ব্যবহার


  1. CSS-এ Fixed Positioning

  2. RGBA ব্যবহার করে CSS ট্রান্সপারেন্সি

  3. CSS ইমেজ স্প্রাইট থেকে আইকন প্রদর্শন করা

  4. CSS-এ Data-Attributes (data-*) ব্যবহার করা