সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) বক্স সাইজিং


একটি এলিমেন্টের মোট উচ্চতা এবং প্রস্থের সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।


এক নজরে বক্স সাইজিং প্রোপার্টি

box-sizing

এলিমেন্টের মোট প্রস্থ এবং উচ্চতার সাথে প্যাডিং এবং বর্ডার যুক্ত করে।


সিএসএস(৩) বক্স সাইজিং প্রোপার্টি ব্যবহার না করলে কি ঘটে?

এলিমেন্ট এর প্রস্থ এবং উচ্চতা নিম্নের ন্যায় গননা করেঃ

অর্থাৎ আপনি যদি box-sizing প্রোপার্টি না ব্যবহার করেন তাহলে একটি এলিমেন্টের সাথে ডিফল্টভাবে বর্ডার ও প্যাডিং যুক্ত হবে এবং আপনার কাংখিত প্রস্থ ও উচ্চতা থেকে ফলাফল ভিন্ন হবে।

নিম্নের উদাহরণে একই উচ্চতা এবং প্রস্থের সাথে প্যাডিং যুক্ত এবং প্যাডিং ব্যতীত দুটি <div> এলিমেন্ট দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
#first_div {
    width: 290px;
    height: 70px;
    border: 2px dotted fuchsia;
}
#second_div {
    width: 290px;
    height: 70px;
    padding: 15px;
    border: 2px dotted blue;
}
</style>
</head>
<body>

<div id="first_div">এই ডিভটি ছোট দেখাচ্ছে, কারণ এর প্রশস্ততা 290px এবং উচ্চতা 70px।</div>
<br>
<div id="second_div">এই ডিভটি বড় দেখাচ্ছে, কারণ এর  প্রশস্ততা 290px এবং উচ্চতা 70px এর সাথে যথাক্রমে 15px প্যাডিং যুক্ত হয়েছে।</div>

</body>
</html>

ফলাফল



তাই দীর্ঘ সময় ধরে ওয়েব-ডেভেলপারদেরকে প্রয়োজনের তুলনায় কম প্রস্থ এবং উচ্চতা নির্ধারণ করতে হত। কারণ তাদেরকে প্যাডিং এবং বর্ডারের মান বাদ দিয়ে হিসাব করতে হত। এই সমস্যার সমাধান হিসেবে সিএসএস(৩) box-sizing প্রোপার্টির উৎপত্তি হয়।


সিএসএস(৩) box-sizing প্রোপার্টি

একটি এলিমেন্টের মোট প্রস্থ এবং উচ্চতার মধ্যে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।

আপনি যদি একটি এলিমেন্টে box-sizing: border-box; সেট করেন তাহলে ঐ এলিমেন্টে সেটকৃত সাইজ(width এবং height) এর সাথে প্যাডিং এবং বর্ডারও যুক্ত হবেঃ


উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস box-sizing প্রোপার্টি</title>
</head>
<body>
<style>
#first_div {
    width: 290px;
    height: 70px;
    border: 2px dotted fuchsia;
	box-sizing: border-box;
}
#second_div {
    width: 290px;
    height: 70px;
    padding: 15px;
    border: 2px dotted blue;
	box-sizing: border-box;
}
</style>
</head>
<body>

<div id="first_div">box-sizing: border-box;
 ব্যবহার করায় দুটি ডিভের সাইজ একই রকম দেখাচ্ছে !!!</div>
<br>
<div id="second_div">box-sizing: border-box;
 ব্যবহার করায় দুটি ডিভের সাইজ একই রকম দেখাচ্ছে!!!</div>

</body>
</html>

ফলাফল



box-sizing: border-box; এর ব্যবহার অনেক বেশি সুবিধাজনক হওয়া অধিকাংশ ডেভেলপার তাদের ওয়েব-পেইজের সকল এলিমেন্টেই এটি ব্যবহার করে থাকে।

ব্রাউজার সাপোর্ট

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera
box-sizing ১০.০ ৮.০ ২৯.০ ৫.১ ৯.৫