সিএসএস প্রস্থে প্যাডিং অন্তর্ভুক্ত করে?

146

দেখে মনে হচ্ছে যে, IE এর মধ্যে প্রস্থের মধ্যে প্যাডিং আকার রয়েছে। এফএফ থাকা অবস্থায় প্রস্থটি হয় না। আমি কীভাবে উভয়কে একইরকম আচরণ করতে পারি?

ধন্যবাদ।

css

— জেক
সূত্র

আপনাকে সম্ভবত স্ট্যান্ডার্ড-কমপ্লায়েন্ট মোড সক্রিয় করতে হবে। কিছু কোড না দেখে অবশ্য আমি আপনাকে এর চেয়ে বেশি কোনও গাইডেন্স দিতে পারি না।

— জেফ হাবার্ড

307

আইই আরও সুবিধাজনক-তবে-অ-মানক "বর্ডার-বক্স" বক্স মডেল ব্যবহার করতেন। এই মডেলটিতে কোনও উপাদানের প্রস্থে প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে। উদাহরণস্বরূপ:
#foo { width: 10em; padding: 2em; border: 1em; }
হবে 10emওয়াইড।
বিপরীতে, সমস্ত স্ট্যান্ডার্ড-ভীত ব্রাউজারগুলি "কন্টেন্ট-বক্স" বক্স মডেলটিতে ডিফল্ট হয় । এই মডেলটিতে কোনও উপাদানের প্রস্থে প্যাডিং বা সীমানা অন্তর্ভুক্ত নয় । উদাহরণস্বরূপ:
#foo { width: 10em; padding: 2em; border: 1em; }
আসলে হবে 16emওয়াইড: 10em+ + 2emপ্রতিটি পাশ জন্য প্যাডিং + 1emপ্রতিটি প্রান্ত জন্য সীমানা।

আপনি যদি বৈধ মার্কআপ , একটি ভাল ডক্টিপ , এবং উপযুক্ত শিরোনাম সহ আইই এর একটি আধুনিক সংস্করণ ব্যবহার করেন তবে এটি মানকে মেনে চলবে। অন্যথায়, আপনি আধুনিক স্ট্যান্ডার্ড-অনুগত ব্রাউজারগুলিকে "সীমান্ত-বাক্স" ব্যবহার করতে বাধ্য করতে পারেন:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

প্রথম ঘোষণাটি অপেরার জন্য প্রয়োজন, দ্বিতীয়টি ফায়ারফক্সের, তৃতীয়টি ওয়েবকিট এবং ক্রোমের জন্য।

আপনার ব্রাউজারটি কী বক্স-সাইজিং ঘোষণার সমর্থন করে তা পরীক্ষার জন্য আমি এখানে একটি সাধারণ পরীক্ষা করেছি: http://phrogz.net/CSS/boxsizing.html

মনে রাখবেন যে ওয়েবকিট (সাফারি এবং ক্রোম) padding-boxকোনও ঘোষণার মাধ্যমে বক্স মডেলকে সমর্থন করে না ।

— Phrogz
সূত্র

2

সামগ্রী বাক্স এবং সীমান্ত বক্স মডেল উভয়েরই উল্লেখ করার জন্য +1। যদিও এই পার্থক্যগুলি বিশদভাবে বলতে চাই।

— BoltClock

1

@ বল্টক্লক আরও কঠোরভাবে উত্তর দেওয়ার প্রেরণার জন্য ধন্যবাদ। আপডেট করা হয়েছে।

— ফোগজ

চমৎকার উত্তর; আমি এখন কয়েক দিন ধরে বিভিন্ন বিকল্পের নামগুলি মনে রাখার (বা সন্ধানের) চেষ্টা করছি ... +1 =)

— ডেভিড মনিকা

কেউ অপেরা সম্পর্কে চিন্তা করে না।

— মাইকেল জে। ক্যালকিনস

3

@ হোয়াইটলেটটারসিনব্ল্যাঙ্কপ্যাপার্স দেখুন যে ডাব্লু 3 স্কুলগুলি কেন সফল হয় এবং তারপরে আরও একটি ভাল রেফারেন্স যা আপনাকে ডাব্লু 3 সি মানের দিকে নিয়ে যায় । ডাব্লু 3 স্কুলগুলিতে আর কোনও লিঙ্ক অনুসরণ করবেন না। আরও, ভবিষ্যতে ওয়েব মান সম্পর্কে আপনার অনুসন্ধান ইঞ্জিনের প্রশ্নেরগুলিতে "MDN" যুক্ত করুন।

— ফোগজ

27

একটি সাধারণ নিয়ম হ'ল একই উপাদানটির জন্য প্যাডিং / মার্জিন এবং প্রস্থের সম্পত্তি ব্যবহার এড়াতে চেষ্টা করা। অর্থাত্ এর অনুরূপ কিছু ব্যবহার করুন

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— shankhan
সূত্র

আমি এই পদ্ধতিটি নিয়মিত ব্যবহার করি এবং এর সাথে ক্রস ব্রাউজারের সমস্যা কখনও নেই।

— কেভিন বিয়াল

20

আমি এই প্রশ্নটিতে ঝাঁপিয়ে পড়েছি এবং যদিও এটি বেশ কয়েক বছর পুরাতন, আমি ভেবেছিলাম যে কেউ যদি এই থ্রেডে ঝাঁপ দেয় তবে আমি এটি যুক্ত করতে পারি।

সিএসএস 3 এর এখন বাক্স-আকারের সম্পত্তি রয়েছে। যদি আপনি সেট করেন, বলুন,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

আপনার ক্লাসটি 1030px এর পরিবর্তে 1000px প্রশস্ত হবে। এটি অবশ্যই তরল ডিভের সাহায্যে পিক্সেল-আকারের সীমানা ব্যবহার করে এমন কারও পক্ষে অবিশ্বাস্যরূপে কার্যকর, কারণ এটি অন্যথায় দ্রবণীয় সমস্যার সমাধান করে।

আরও ভাল, বাক্স-সাইজিং আইআই 7 এবং নীচে বাদে সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত। প্রস্থ বা উচ্চতার মাত্রার মধ্যে সমস্ত আইটেম অন্তর্ভুক্ত করতে , বক্স-আকারকে সীমানা-বাক্সে সেট করুন। করতে সমষ্টিগত প্রস্থ এবং / অথবা উচ্চতা, যা ডিফল্টভাবে হয় অন্যান্য আইটেম, আপনি "সামগ্রী-বক্স" করার বক্স নির্ধারন সেট করতে পারেন।

আমি ব্রাউজারের সিনট্যাক্সের বর্তমান অবস্থার বিষয়ে নিশ্চিত নই, তবে আমি এখনও -মোজ এবং ওয়েবেকিট উপসর্গগুলি অন্তর্ভুক্ত করেছি:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— ম্যাসন বার্জে
সূত্র

হ্যাঁ, এবং পল আইরিশ এখানে একটি সুন্দর ব্লগ নিবন্ধ আছে: paulirish.com/2012/box-sizing-border-box-ftw

— ডেভ বার্টন

এই উত্তরটিতে এতগুলি আপত্তি রয়েছে যখন গ্রহণযোগ্য উত্তরটি একই উত্তরটি লেখা হয়েছিল যা 3 বছর আগে লেখা হয়েছিল?

— ডিপ্পাস

1

আপনি কি একটি ডকটাইপ ঘোষণা করেছেন? যখন আমি এইচটিএমএল কোডিং শুরু করলাম তখন আমার এই সমস্যা হয়েছিল এবং এটি কোনও ডক্টাইপ ঘোষণা না করেই হয়েছিল। আমার পছন্দ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
সূত্র

1

যাদের এখনও সমস্যা আছে তাদের জন্য jQuery দুটি সম্পত্তি সরবরাহ করেছে outerWidth ()এবং সীমান্তের সাথে বা ছাড়াই কোনও বস্তুর প্রস্থinnerWitdh () জানতে ...

— প্যাট্রিক
সূত্র