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

CSS দিয়ে ডিসপ্লে ইনলাইন

ব্লকের বিপরীত, ইনলাইন এলিমেন্টগুলো একই লাইনে শুরু হয় এবং শুধু দরকার প্রস্থ নেয়। CSS-এ display: inline প্রোপার্টি মান বাস্তবায়ন করার উদাহরণ দেখি:

উদাহরণ

একটি উদাহরণ:

<!DOCTYPE html> <html> <head> <style> span {    background-color: orange;    color: white; } p.demo {    display: none; } span.demo1 {    display: inline; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo">9AM</p> 10AM on 20th December. </div> <div> Match will end at <span class="demo1">5PM</span> on 20th December. </div> </body> </html>

আউটপুট

CSS দিয়ে ডিসপ্লে ইনলাইন

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style> span#demo {    background-color:orange;    color: white;    display:inline; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <span id="demo">9AM</span> on 20th December. </div> </body> </html>

আউটপুট

CSS দিয়ে ডিসপ্লে ইনলাইন


  1. CSS-এ Display প্রপার্টি ব্যবহার

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

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

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