উত্তর:
সমাধানটি আপনার প্যাডড ডিভটি স্থির প্রস্থের বাইরের ডিভের সাথে মোড়ানো
এইচটিএমএল
<div class="outer">
<div class="inner">
<!-- your content -->
</div><!-- end .inner -->
</div><!-- end .outer -->
সিএসএস
.outer, .inner {
display: block;
}
.outer {
/* specify fixed width */
width: 300px;
padding: 0;
}
.inner {
/* specify padding, can be changed while remaining fixed width of .outer */
padding: 5px;
}
আপনার সিএসএসে এটি ঘোষণা করুন এবং আপনার ভাল হওয়া উচিত:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
এই অতিরিক্ত সমাধানটি ব্যবহার না করে সমাধানটি কার্যকর করা যেতে পারে।
এটি ব্রাউজারকে ডিভের "বাহ্যিক"-প্রস্থ অনুসারে প্রস্থ গণনা করতে বাধ্য করবে, এর অর্থ প্যাডিং প্রস্থ থেকে বিয়োগ করা হবে।
আপনি আই 6 বাক্সের মডেলটি অনুকরণ করতে চাইছেন বলে মনে হচ্ছে। এটি অর্জনের জন্য আপনি সিএসএস 3 বৈশিষ্ট্য বক্স-সাইজিং: বর্ডার-বক্স ব্যবহার করতে পারেন । এই IE8 দ্বারা সমর্থিত নয়, তবে ফায়ারফক্স জন্য আপনাকে ব্যবহার করতে হবে -moz-box-sizingএবং সাফারি / ক্রোম, ব্যবহারের জন্য -webkit-box-sizing।
আইই already ইতিমধ্যে উচ্চতার হিসাব ভুল করেছে, সুতরাং আপনি সেই ব্রাউজারে ভাল তবে আমি আই 7 সম্পর্কে নিশ্চিত নই, আমি মনে করি এটি উচ্চতাটিকে কুইর্কস মোডে একইভাবে গণনা করবে।
এই কৌশল চেষ্টা করুন
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
এটি ব্রাউজারকে ডিভের "বাহ্যিক"-প্রস্থের সাথে প্রস্থের হিসাব করতে বাধ্য করবে, এর অর্থ প্যাডিং প্রস্থ থেকে বাদ দেওয়া হবে।