আমি কীভাবে প্যাডিং সম্পত্তি সিএসএসে প্রস্থ বা উচ্চতা পরিবর্তন করা থেকে আটকাতে পারি?


227

আমি DIVএস দিয়ে একটি সাইট তৈরি করছি । আমি যখন ডিআইভি তৈরি করি তখন ব্যতীত সমস্ত কিছুই কার্যকর হয়। আমি তাদের এইভাবে তৈরি করেছি (উদাহরণস্বরূপ):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

আমি যখন padding-leftসম্পত্তি যুক্ত করব তখন DIVপরিবর্তনের প্রস্থটি 220px এ পরিবর্তিত হবে এবং আমি চাই এটি 200px এ থাকবে।

ধরা যাক আমি ঠিক একইরকম আরেকটি DIVনাম তৈরি করেছি এবং এটি ভিতরে রেখেছি তবে কোনও প্যাডিং নেই এবং আছে । আমি একই জিনিস পেয়েছি, এর প্রস্থ 220px হবে।anotherdivnewdivnewdivnewdivanotherdivpadding-left: 20pxnewdiv

আমি কিভাবে এই সমস্যা ঠিক করতে পারবো?


3
আমি দুঃখের সাথে বলতে চাই, তবে আমি পছন্দ করি
আইআই

উত্তর:


390

সম্পত্তি যুক্ত করুন:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

দ্রষ্টব্য: এটি 8 সংস্করণের নীচে ইন্টারনেট এক্সপ্লোরারে কাজ করবে না


14
এটি সীমান্তের জন্য দুর্দান্ত সমাধান, তবে এটি প্যাডিংয়ের জন্য কীভাবে সহায়তা করে?
কাটো

6
এটা খাঁটি যাদু! - এটি বাক্সের মডেলটি ঠিক করে যা আমরা সবাই জানি এবং ঘৃণা করি! অর্থ অন্তর্নিহিত হিসাবে প্রস্তাব করা উচিত যেভাবে এটি কাজ করে তোলে - চশমাগুলির চেয়ে - তবে যতদূর আমি জানি যে কোনও চশমা ভাঙেনি: ডি এই নিবন্ধটি এটি ভালভাবে স্পষ্ট করেছে ... স্ট্যাকওভারফ্লো
প্রযুক্তিগত

2
@technicalbloke আপনার লিঙ্কটি এই প্রশ্নে ফিরে এসেছে।
mhenry1384

11
ওহ, হ্যাঁ, কপি এবং পেস্ট আপ মোরগ। এই সেই লিঙ্কটিই
প্রযুক্তি

1
আপনার অনেকের প্রস্থ বিবেচনা করা উচিত: নীচে স্বয়ংক্রিয় ট্রিক। ব্রাউজার জুড়ে কাজ, কম কোড, ইত্যাদি
রায়ান Shillington

39

width: autoএবং এর সাথে আপনার নতুনদ্বীপে একটি ডিভ রাখুনmargin-left: 20px

Newdiv থেকে প্যাডিং সরান।

ডাব্লু 3 বক্স মডেল পৃষ্ঠায় ভাল তথ্য রয়েছে।


1
আপনি যখন একটি ব্যবহার করতে পারেন তখন কেন দুটি ডিভ ব্যবহার করবেন?
অ্যারন ফ্রেঙ্ক


11

আপনি যদি ডিভের আকার পরিবর্তন না করে কোনও ডিভের মধ্যে পাঠ্য প্রবেশ করতে চান তবে text-indentপরিবর্তে সিএসএস ব্যবহার করুন padding-left

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>


1
এটিই আমার সমাধানের প্রস্থ ডিভের জন্য কাজ করতে পেল। দুর্ভাগ্যক্রমে বাক্স-আকার দেওয়ার ফলে প্রস্থকে প্রভাবিত করা থেকে প্যাডিং থামানো হয়নি, সুতরাং এই বিস্ময়কর ছোট্ট সম্পত্তিটি দেখানোর জন্য একটি টনকে ধন্যবাদ।
স্টিভো


1

আমি যখন প্যাডিং-বামে সম্পত্তি যুক্ত করি তখন ডিআইভিটির প্রস্থ 220px এ পরিবর্তিত হয়

হ্যাঁ, এটি হুবহু মানদণ্ড অনুসারে। এভাবেই কাজ করার কথা।

আসুন আমি বলি যে আমি আরেকটি ডিআইভি তৈরি করেছি যার নাম আরেকটি ডিআইভি ঠিক নতুনডিভের মতো, এবং এটিকে নতুনডিভের ভিতরে রাখি তবে নতুনডিভের কোনও প্যাডিং নেই এবং অন্য ডিভির প্যাডিং-বাম রয়েছে: 20px। আমি একই জিনিস পেয়েছি, newdiv এর প্রস্থ 220px হবে;

না, newdiv 200px প্রশস্ত থাকবে।


2
গুফা, মানদণ্ডগুলি মোটেই কাজ করার কথা নয়। প্যাডিং অবশ্যই প্রয়োগ করা হচ্ছে এমন উপাদানগুলির মাত্রাগুলিকে প্রভাবিত করার কথা নয়। সর্বাধিক শ্রদ্ধার সাথে, আপনি কি 'প্যাডিং' কে 'মার্জিন' দিয়ে বিভ্রান্ত করছেন তা সম্ভব?
da5id

1
হ্যাঁ, প্যাডিং অবশ্যই উপাদানটির মাত্রা প্রভাবিত করবে বলে মনে করা হচ্ছে। আমি মনে করি যে আপনিই বিভ্রান্ত হয়ে পড়েছেন ... আপনি কীভাবে প্রস্তাব করবেন যে মার্জিনটি উপাদানটির মাত্রাকে প্রভাবিত করবে?
গুফা

আসলে, আপনি জানেন আমি মনে করি আমরা দুজনেই এক উপায়ে ঠিক আছি আমি এমন প্রভাবগুলির সাথে লড়াই করার অভ্যস্ত যে আমি পুরোপুরি মানটি ভুলে গিয়েছিলাম। আমি এখানে ভাল ব্যাখ্যা পেয়েছি quirksmode.org/css/box.html
da5id

সুতরাং, আমার ক্ষমা প্রার্থনা করছি মিঃ গুফা। তবে ব্যবহারিক উদ্দেশ্যে (যা আমরা যা বলছি তার পরেও) আমার পরামর্শটি এখনও ভাল না?
da5id

ঠিক আছে, আপনি ঠিক ঠিক বলেছেন যে বাক্সে মডেল বাগ রয়েছে তবে এটি এই প্রশ্নের জন্য প্রযোজ্য নয় ... :)
গুফা

-1

আপনার ডিভি প্রস্থটি 160px এ পরিবর্তিত করুন যদি আপনার 20px এর প্যাডিং থাকে তবে এটি আপনার ডিভের প্রস্থে 40px অতিরিক্ত যুক্ত করে যাতে আপনার ডিভিটি স্বাভাবিক দেখায় এবং তার উপর অতিরিক্ত প্রস্থের সাথে বিকৃত না হওয়ার জন্য আপনাকে প্রস্থ থেকে 40px বিয়োগ করতে হবে এবং আপনার পাঠ্য সমস্ত গোলমেলে।


2
এটি @ রভারচারের দেওয়া উত্তর হিসাবে একই।
বিটজুঙ্কি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.