সিএসএস এর ইনলাইন ব্লক কি?







ইনলাইন-ব্লক


এখন অনেক কাল পরে বক্স এর গ্রিড তৈরি সম্ভব যা float প্রোপার্টি ব্যবহার করলে ব্রাউজার এর প্রসস্থতা অনুসারে পূর্ণ এবং সুন্দরভাবে ফিট হয়ে যায় অর্থাৎ যখন ব্রাউজার এর আকার পরিবর্তন করা হয়।
display প্রোপার্টি এর inline-block মান এটিকে আরও সহজ করেছে। inline-block এলিমেন্ট inline এলিমেন্ট এর মতই, কিন্তু এদের প্রসস্ততা ও উচ্চতা নির্ধারণ করা যায়।

পুরাতন পদ্ধতি অনুসারে float ব্যবহার করা অর্থাৎ floating বক্স এর পরে আমাদের clear প্রোপার্টিও নির্ধারণ করে দিতে হয়। একই কাজ display প্রোপার্টি এর inline-block মান নির্ধারণ করে দিয়েও করা যায় এবং কোন clear প্রোপার্টি এর পয়োজন হয় না।


<head>
<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}
</style>
</head>

উদাহরণ :-

 <!DOCTYPE html>
<html>
<head>

<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

.after-box {
    border: 3px solid red;
}
</style>
</head>
<body>

<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

</body>
</html>


আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন



Comments

Popular posts from this blog

How to Show Your Posts on Google's First Page?

31 True Science Facts You Didn't Know...Until Now -

সৌরজগৎ এ প্রথম আন্তঃনাক্ষত্রিক গ্রহাণু