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

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

হোম-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 ১০.০ ৮.০ ২৯.০ ৫.১ ৯.৫