সিএসএসে মার্জিন বনাম প্যাডিং কখন ব্যবহার করবেন [বন্ধ]

Question

সিএসএস লেখার সময়, কোনও নির্দিষ্ট নিয়ম বা গাইডলাইন রয়েছে যা কখন ব্যবহার করবেন marginএবং কখন ব্যবহার করবেন তা সিদ্ধান্ত নেওয়ার ক্ষেত্রে ব্যবহার করা উচিত padding?

Comments

আপনি যখন মনোনিবেশযোগ্য ক্ষেত্রটি বাড়িয়ে তুলতে চান তখন ট্যাগগুলিতে ব্যবহার paddingকরুন । <a>

— জোশ হাবদাস

Answer 1

টিএল; ডিআর: ডিফল্টরূপে আমি সর্বত্র মার্জিন ব্যবহার করি, যখন আমার কোনও সীমানা বা পটভূমি থাকে এবং visible দৃশ্যমান বাক্সের অভ্যন্তরে স্থান বাড়াতে চাই।

আমার কাছে, প্যাডিং এবং মার্জিনের মধ্যে সবচেয়ে বড় পার্থক্যটি হল উল্লম্ব মার্জিনগুলি স্বয়ংক্রিয় পতন হয়, এবং প্যাডিং হয় না।

প্যাডিংয়ের সাথে একে অপরের উপরে দুটি উপাদান বিবেচনা করুন 1em। এই প্যাডিং উপাদানটির অংশ হিসাবে বিবেচিত এবং সর্বদা সংরক্ষিত থাকে।

সুতরাং আপনি প্রথম উপাদানটির পদক্ষেপটি সমাপ্ত করবেন, তারপরে প্রথম উপাদানটির প্যাডিং হবে, দ্বিতীয়টির প্যাডিং হবে এবং তারপরে দ্বিতীয় উপাদানটির সামগ্রী থাকবে।

এইভাবে দুটি উপাদানগুলির বিষয়বস্তু 2emপৃথক হয়ে শেষ হবে ।

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

সুতরাং এই উদাহরণে, আপনি প্রথম এলিমেন্টের সাথে সমাপ্ত হবেন এবং তারপরে 1emসম্মিলিত মার্জিনের পরে দ্বিতীয় উপাদানটির বিষয়বস্তু অনুসরণ করবেন। সুতরাং দুটি উপাদানের বিষয়বস্তু কেবল 1emআলাদা apart

এটি সত্যই কার্যকর হতে পারে যখন আপনি জানেন যে 1emকোনও উপাদানটির চারপাশে ফাঁক দেওয়ার বিষয়ে আপনি বলতে চান , এটি পরবর্তী উপাদানটি নির্বিশেষে।

অন্য দুটি বড় পার্থক্য হ'ল প্যাডিং ক্লিক অঞ্চল এবং পটভূমির রঙ / চিত্রের অন্তর্ভুক্ত, তবে মার্জিনটি নয়।

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Comments

+1 যখন স্টাইলিং টাইপোগ্রাফি এবং অনুচ্ছেদ, শিরোনাম এবং তালিকার অ্যাব্র্যাটরি সিকোয়েন্সগুলি সংলগ্ন মার্জিন ভেঙে পড়া আচরণের কারণে মার্জিনের সাথে উপাদানগুলিকে স্থান দেওয়া প্রায় সর্বদা ভাল।

— পিট বি

অনুভূমিক প্রান্তগুলি না খালি কেন এটি উল্লম্ব মার্জিনটি ভেঙে যায়? এটি প্রচুর লোককে বিভ্রান্ত করতে পারে

— মার্কোস পেরেইরা

উল্লম্ব মার্জিনগুলি কেবলমাত্র ব্লক উপাদানগুলির জন্য সঙ্কুচিত হয়। ইনলাইন ব্লক উপাদানগুলির জন্য মার্জিনগুলি উল্লম্ব এবং অনুভূমিকভাবে উভয়ই যুক্ত করা হয়। সুতরাং আমি নিশ্চিত নই যে এটি কোনও সমস্যা যে আনুভূমিক মার্জিনগুলি ব্লক উপাদানগুলিতে না ভেঙে যেহেতু তারা যেভাবেই তাদের ধারক পূর্ণ করে।

— মাইক 22

"অনুভূমিক প্রান্তগুলি কেন অনুভূমিক প্রান্তে ভেঙে যায়?" ভাসমান ব্যবহার না করে একে অপরের সাথে ব্লক উপাদানগুলি পাশাপাশি রাখার কোনও ব্যবস্থা নেই - যার মার্জিনগুলি কোনওভাবেই ভেঙে যায় না (এমনকি উল্লম্ব) বা নিখুঁত অবস্থান, যেখানে স্পষ্টতই কোনও ভাঙ্গন বা ইনলাইন-ব্লক নেই, যেখানে এটি আলাদা মডেল ব্যবহার করে যেখানে এটি বিবেচনা করা হয় ইনলাইন এবং সামগ্রী (স্পেস, পাঠ্য) উল্লেখযোগ্য বা টেবিল, ফ্লেক্সবক্স, কলামগুলির মতো অন্যান্য জিনিস যেখানে কলামগুলির মধ্যে ব্যবধানের সাথে বিশেষ আচরণ রয়েছে। সুতরাং সংক্ষিপ্তভাবে এমন কোনও জায়গা নেই যে সম্ভব হলেও অনুভূমিক মার্জিন ভেঙে পড়তে পারে

— থোমাসর্টার

এছাড়াও আপনার খেয়াল করা উচিত যে প্যাডিং মোট প্রস্থ / উচ্চতা উপাদানের সাথে অন্তর্ভুক্ত রয়েছে, যখন এটির সাথে ব্যবহার করা box-sizing: border-box;হলে আপনার width: 100px; padding-left: 20px;মোট প্রস্থটি এখনও 100px হবে তবে box-sizing: content-box;সামগ্রীর প্রস্থটি 20px দ্বারা হ্রাস পাবে, যেখানে প্যাডিং সামগ্রীর প্রস্থের গণনার ক্ষেত্রে পৃথক রয়েছে যা আপনার সামগ্রীর প্রস্থ 120px সামগ্রী-বাক্সে করে;

— জোমার সেভিলজো

Answer 2

ভিতরে প্যাডিং থাকাকালীন মার্জিন ব্লক উপাদানগুলির বাইরে রয়েছে।

• বাইরের জিনিসগুলি থেকে ব্লকটি আলাদা করতে মার্জিন ব্যবহার করুন
• ব্লকের প্রান্তগুলি থেকে সামগ্রীগুলি সরিয়ে নিতে প্যাডিং ব্যবহার করুন।

Comments

এখনও, সঠিক উত্তরটি নীচে @ প্যাভন দ্বারা। সংলগ্ন উপাদানগুলির মার্জিন ওভারল্যাপ হয় যেখানে প্যাডিং ওভারল্যাপ হয় না। অর্থাত্ মোট বিচ্ছেদটি হলpadding(A) + padding(B) + max(margin(A), margin(B))

— নেক্রোমেন্সার

এখানে একটি ভাল অনুশীলন: প্যাডিং এবং মার্জিন পরীক্ষা করতে শক্ত লাল সীমানা ব্যবহার করুন । কখনও কখনও, আমরা এমন কিছু গণ্ডগোল করতে পারি <a>, যা কিছু পাঠ্য ধারণ করে থাকে, যার চারপাশে প্যাডিং এবং মার্জিন থাকে। আমরা কতটা জায়গা ক্লিক করতে পারি তা পরীক্ষা করতে এই কৌশলটি ব্যবহার করুন।

— p3nchan

Answer 3

সেরা আমি উদাহরণ, ডায়াগ্রামে সঙ্গে এই ব্যাখ্যা দেখা করেছি, এবং এমনকি একটি 'এটা চেষ্টা নিজেকে' দৃশ্য এখানে ।

আমি মনে করি নীচের চিত্রটি তাত্ক্ষণিক তাত্ক্ষণিক দৃষ্টিভঙ্গি দেয়।

একটি বিষয় মনে রাখতে হবে মান সম্মত ব্রাউজারগুলি ( IE quirks একটি ব্যতিক্রম ) কেবলমাত্র প্রদত্ত প্রস্থে সামগ্রীর অংশকে রেন্ডার করে, তাই এটি বিন্যাসের গণনায় ট্র্যাক রাখুন। এছাড়াও নোট করুন যে সীমানা বাক্সটি বুটস্ট্র্যাপ 3 সমর্থন করে কিছুটা প্রত্যাবর্তন দেখতে পাচ্ছে ।

Comments

w3.org/TR/CSS2/box.html#box- মাত্রা এবং ছবি w3 থেকে w3.org/TR/CSS2/images/boxdim.png

— জেপি

Answer 4

আপনার প্রশ্নের আরও প্রযুক্তিগত ব্যাখ্যা রয়েছে, তবে আপনি যদি মার্জিন এবং প্যাডিং সম্পর্কে চিন্তা করার কোনও উপায় সন্ধান করেন যা কখন এবং কীভাবে তাদের ব্যবহার করতে হয় তা চয়ন করতে আপনাকে সহায়তা করবে this

দেওয়ালে ঝুলন্ত ছবিগুলির সাথে ব্লক উপাদানগুলির তুলনা করুন:

• ব্রাউজার উইন্ডোতে মাত্র প্রাচীর মত হল।
• বিষয়বস্তু মাত্র একটি আলোকচিত্র ভালো হয়।
• মার্জিন শুধু ষড়যন্ত্র করে ফাঁসানো ছবির মধ্যে প্রাচীর স্থান ভালো হয়।
• প্যাডিংটি কেবল কোনও ছবির চারপাশে ম্যাটের মতো।
• সীমান্ত মাত্র একটি ফ্রেমে সীমান্ত ভালো হয়।

মার্জিন এবং প্যাডিংয়ের মধ্যে সিদ্ধান্ত নেওয়ার সময়, আপনি যখন প্রাচীরের অন্যান্য জিনিসগুলির সাথে সম্পর্কের ক্ষেত্রে কোনও উপাদানকে ফাঁক করে দিচ্ছেন এবং আপনি যখন উপাদানটির উপস্থিতিটি সামঞ্জস্য করছেন তখন প্যাডিংয়ের ক্ষেত্রে মার্জিন ব্যবহার করার একটি দুর্দান্ত নিয়ম । মার্জিন উপাদান আকার পরিবর্তন হবে না, কিন্তু প্যাডিং সাধারণত উপাদান বড় করবে ¹ ।

¹ এই ডিফল্ট বাক্স মডেলটি box-sizingবৈশিষ্ট্যের সাথে পরিবর্তন করা যেতে পারে ।

Comments

আসলে আমি box-sizing: border-box"সামগ্রীর জন্য স্থান" ছোট করার বিষয়ে একমত নই । এখানে 2 টি বাক্সের সাথে একটি মূর্খতা রয়েছে যেখানে আমি যদি একই প্যাডিং রাখি এবং "অ্যাক্টিভ" যুক্ত করি, তবে হোভারে "ডিএক্টিভেট" রাখি, আমি ব্যবহার করি কিনা তাতে কিছু যায় আসে না box-sizing। এটি এখনও বাক্স প্রসারিত হবে। বাক্সটি প্রসারিত হওয়া দীর্ঘতম প্যাডিংয়ের জন্য আমাকে সর্বোচ্চ ছড়িয়ে দিতে হয়েছিল, তারপরে বাক্সে যাচ্ছিল অন্য শব্দের সাথে মিলে যাওয়া সংমিশ্রণটি ব্যবহার করতে ট্রায়াল এবং ত্রুটি ব্যবহার করুন যা প্রতিটি শব্দের জন্য এটি একই প্রস্থে থাকবে: jsfiddle.net / নভেজ্যাক্স 2 / এনজিজেকজাহাহ

— ভ্যাপকিগুই

আরে ভ্যাপকিগু, আপনার ইনপুটটির জন্য ধন্যবাদ। আমার বিবৃতিটি সাধারণত সত্য, যখন প্রস্থ বা উচ্চতা কোনও উপাদানের জন্য ঘোষিত হয়, যখন অঘোষিত মাত্রা সহ কোনও উপাদান সত্যই প্রভাবিত হয় না border-box(দেখুন: jsfiddle.net/8yravLmL/1 )। বিভ্রান্তি এড়াতে আমি আমার উত্তরকে আরও সংকুচিত করব।

— stvnrynlds

Answer 5

MARGIN বনাম প্যাডিং :

1. মার্জিনটি একটি উপাদানটিতে সেই উপাদান এবং পৃষ্ঠার অন্যান্য উপাদানগুলির মধ্যে দূরত্ব তৈরি করতে ব্যবহৃত হয়। যেখানে উপাদানগুলির উপাদান এবং সীমানার মধ্যে দূরত্ব তৈরি করতে প্যাডিং ব্যবহৃত হয়।

2. মার্জিন এমন কোনও উপাদানের অংশ নয় যেখানে প্যাডিং উপাদানটির অংশ।

মার্জিন বনাম প্যাডিং - সিএসএস বৈশিষ্ট্য থেকে নিচের চিত্রটি নীচে দেখুন

Comments

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

— নিকোডেমাস

Answer 6

Https://www.w3schools.com/css/css_boxmodel.asp থেকে

বিভিন্ন অংশের ব্যাখ্যা:

• সামগ্রী - বাক্সের সামগ্রী, যেখানে পাঠ্য এবং চিত্র প্রদর্শিত হবে appear

• প্যাডিং - সামগ্রীর চারপাশের একটি অঞ্চল সাফ করে। প্যাডিং স্বচ্ছ

• সীমানা - একটি সীমানা যা প্যাডিং এবং সামগ্রীগুলির চারপাশে যায়

• মার্জিন - সীমানার বাইরের একটি অঞ্চল সাফ করে। মার্জিন স্বচ্ছ

সরাসরি উদাহরণ (মানগুলি পরিবর্তন করে ঘুরে দেখুন): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Comments

ধন্যবাদ। একটি ছবি হাজার শব্দের সমান!

— Catbuilts

Answer 7

এখানে এমন কিছু এইচটিএমএল রয়েছে যা ক্লিকযোগ্যতা এবং পটভূমি পূরণকে কীভাবে paddingএবং marginপ্রভাবিত করে তা দেখায় । একটি বস্তু তার প্যাডিংয়ের জন্য ক্লিকগুলি গ্রহণ করে, তবে মার্জিন'র অঞ্চলে থাকা কোনও বস্তুর ক্লিকগুলি তার পিতামাতার কাছে যায়।

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Comments

আপনি jsfiddle এ অনুরূপ কোড চালাতে পারেন: jsfiddle.net/fschwiet/y74Nz/3

— ফ্র্যাঙ্ক শুইটারম্যান

Answer 8

মার্জিনগুলি সম্পর্কে জিনিসটি হ'ল উপাদানটির প্রস্থ সম্পর্কে আপনার চিন্তা করার দরকার নেই।

আপনি যখন {padding: 10px;}কোনও জিনিস দেওয়ার সময় পছন্দ করেন তবে আপনাকে ' ফিট ' রাখতে এবং এর চারপাশের অন্যান্য উপাদানগুলিকে বিরক্ত না করার জন্য আপনাকে উপাদানটির প্রস্থ 20px কমিয়ে আনতে হবে।

তাই আমি সাধারণত সবকিছু পেতে প্যাডিংগুলি ব্যবহার করে শুরু করি ' packed' এবং তারপরে ছোটখাটো টুইটের জন্য মার্জিন ব্যবহার করি।

আরেকটি বিষয় সম্পর্কে সচেতন হতে হবে যে প্যাডিংগুলি বিভিন্ন ব্রাউজারগুলিতে আরও সামঞ্জস্যপূর্ণ এবং আইই নেতিবাচক মার্জিনকে খুব ভাল আচরণ করে না।

Answer 9

মার্জিনটি একটি উপাদান (সীমানার বাইরে) এর চারপাশে একটি অঞ্চল সাফ করে, তবে প্যাডিং কোনও উপাদানটির (সীমানার অভ্যন্তরে) আশেপাশের একটি অঞ্চল সাফ করে।

এর অর্থ হল যে আপনার উপাদানটি এর বাইরের মার্জিনগুলি সম্পর্কে জানে না, সুতরাং আপনি যদি ডায়নামিক ওয়েব নিয়ন্ত্রণ বিকাশ করছেন তবে আমি সুপারিশ করছি যে আপনি যদি পারেন তবে প্যাডিং বনাম মার্জিন ব্যবহার করুন।

মনে রাখবেন যে কিছু সময় আপনাকে মার্জিন ব্যবহার করতে হবে।

Answer 10

marginএবং এর মধ্যে পার্থক্যগুলি জানা ভাল padding। এখানে কিছু পার্থক্য রয়েছে:

• মার্জিন একটি উপাদানের বাইরের স্থান , অন্যদিকে প্যাডিং একটি উপাদানটির অভ্যন্তরীণ স্থান ।

• মার্জিন হ'ল একটি উপাদানের সীমানার বাইরে স্থান, আর প্যাডিং হ'ল এটির সীমানার অভ্যন্তরের স্থান।

• মার্জিন অটোটির মান গ্রহণ করে: margin: autoতবে আপনি অটোতে প্যাডিং সেট করতে পারবেন না।

• মার্জিনটি যে কোনও সংখ্যায় সেট করা যেতে পারে তবে প্যাডিং অবশ্যই অ-নেতিবাচক হবে।

• আপনি যখন কোনও উপাদান স্টাইল করেন, প্যাডিংগুলিও প্রভাবিত হবে (উদাহরণস্বরূপ পটভূমির রঙ), তবে মার্জিন নয়।

Answer 11

একটি বিষয় লক্ষণীয় হ'ল যখন স্বয়ংক্রিয়ভাবে প্রান্তিক প্রান্তগুলি আপনাকে বিরক্ত করে (এবং আপনি আপনার উপাদানগুলির মধ্যে পটভূমির রঙগুলি ব্যবহার করেন না) এমন কিছু যা প্যাডিং ব্যবহার করা সহজ।

Answer 12

উন্নত মার্জিন বনাম প্যাডিং ব্যাখ্যা করা হয়েছে

paddingকোনও উপাদানটিতে স্পেস সামগ্রী ব্যবহার করা অনুচিত ; আপনি আবশ্যক কাজে লাগাতে marginউপর সন্তান উপাদান পরিবর্তে। ইন্টারনেট এক্সপ্লোরার এর মতো পুরানো ব্রাউজারগুলি ইন্টারনেট মডেল এক্সপ্লোরার 4-এmargin পুরোপুরি কার্যকরভাবে কাজ করে তবে বাক্স মডেলটি ভুল ব্যবহার করে ।

ব্যবহার করার padding জন্য উপযুক্ত হলে দুটি ব্যতিক্রম রয়েছে :

1. এটি একটি ইনলাইন উপাদানটিতে প্রয়োগ করা হয় যাতে কোনও ইনপুট উপাদান হিসাবে কোনও শিশু উপাদান থাকতে পারে না ।

2. আপনি অত্যন্ত বিবিধ ব্রাউজার বাগের জন্য ক্ষতিপূরণ দিচ্ছেন যা একজন বিক্রেতার * কাশি * মজিলা * কাশি * ঠিক করতে অস্বীকার করেছে এবং নিশ্চিত (আপনি ডাব্লু 3 সি এবং WHATWG সম্পাদকদের সাথে নিয়মিত মতবিনিময় করেন) আপনার অবশ্যই একটি কার্যক্ষম সমাধান এবং এই সমাধান থাকতে হবে অন্য যে কোনও কিছুর স্টাইলিংয়ের ফলে আপনি যে বাগটি ক্ষতিপূরণ দিচ্ছেন তা প্রভাব ফেলবে না।

আপনার সাথে একটি 100% প্রস্থের উপাদান আছে padding: 50px;আপনি কার্যকরভাবে পেতে width: calc(100% + 100px);। যেহেতু marginহয় না যোগ করা widthএটা অপ্রত্যাশিত বিন্যাস সমস্যার সৃষ্টি যখন আপনি ব্যবহার করবে না marginউপর child elementsপরিবর্তে paddingসরাসরি উপাদান।

তাই আপনি যদি করছি না ঐ দুই জিনিস এক করছ না উপাদানে কিন্তু এটি প্যাডিং যোগ নিশ্চিত করার আপনি পেতে যাচ্ছেন সরাসরি শিশু / শিশুদের উপাদান (গুলি) এর প্রত্যাশিত আচরণ সব ব্রাউজার।

Comments

মজাদার! আপনার কি সেই বিক্রেতা বাগের জন্য কোনও লিঙ্ক আছে?

— অ্যালেক্স আঙ্গাস

@ অ্যালেক্সআঙ্গাস আশা করি উইকিপিডিয়া আপনার জন্য কাজ করে? en.wikedia.org/wiki/Internet_Explorer_box_model_bug

— জন

Answer 13

প্রথমে দেখে নেওয়া যাক পার্থক্যগুলি কী এবং প্রতিটি দায়িত্ব কী:

1) মার্জিন

সিএসএস মার্জিন বৈশিষ্ট্যগুলি উপাদানগুলির চারপাশে স্থান তৈরি করতে ব্যবহৃত হয়।
মার্জিন বৈশিষ্ট্য সীমানার বাইরে সাদা জায়গার আকার নির্ধারণ করে। সিএসএস সহ, মার্জিনগুলিতে আপনার সম্পূর্ণ নিয়ন্ত্রণ রয়েছে have
কোনও উপাদানের প্রতিটি পাশের (শীর্ষ, ডান, নীচে এবং বাম) জন্য মার্জিন সেট করার জন্য সিএসএসের বৈশিষ্ট্য রয়েছে।

2) প্যাডিং

সিএসএস প্যাডিং বৈশিষ্ট্যগুলি সামগ্রীগুলির চারপাশে স্থান তৈরি করতে ব্যবহৃত হয়।
প্যাডিং উপাদানগুলির (সীমানার অভ্যন্তরে) সামগ্রীর চারপাশের একটি অঞ্চল সাফ করে।
সিএসএস সহ, প্যাডিংয়ের উপরে আপনার সম্পূর্ণ নিয়ন্ত্রণ রয়েছে। উপাদানের প্রতিটি পাশের প্যাডিং সেট করার জন্য সিএসএসের বৈশিষ্ট্য রয়েছে (শীর্ষ, ডান, নীচে এবং বাম)।

সুতরাং সহজভাবে মার্জিনগুলি উপাদানগুলির চারপাশের স্থান, অন্যদিকে প্যাডিং উপাদানগুলির চারপাশের স্থান যা উপাদানটির অংশ।

কোডম্যান্সের এই চিত্রটি দেখায় যে কীভাবে মার্জিন এবং সীমানাগুলি টগটার হয় এবং কীভাবে সীমান্ত বাক্স এবং সামগ্রী সামগ্রী এটি আলাদা করে।

এছাড়াও তারা প্রতিটি বিভাগকে নীচে হিসাবে সংজ্ঞায়িত করে:

• সামগ্রী - এটি বাক্সের সামগ্রীর ক্ষেত্রটি সংজ্ঞায়িত করে যেখানে পাঠ্য, চিত্র বা অন্যান্য উপাদানগুলির মতো প্রকৃত সামগ্রী থাকে।
• প্যাডিং - এটি এতে থাকা বাক্স থেকে মূল বিষয়বস্তু সাফ করে।
  
• সীমানা - এটি উভয় সামগ্রী এবং প্যাডিংকে ঘিরে।
• মার্জিন - এই অঞ্চলটি একটি স্বচ্ছ স্থান নির্ধারণ করে যা এটি অন্যান্য উপাদান থেকে পৃথক করে।

Comments

এই উত্তরটি অন্য কোথাও অনুলিপি করে আটকানো হয়েছে বলে মনে হচ্ছে। "কোডম্যানস" এর অন্তর্ভুক্ত লিঙ্কটির উত্তরের সাথে কিছু করার নেই।

— অ্যালেক্স আঙ্গাস

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

— আলিরেজা

Answer 14

আমি সর্বদা এই নীতিটি ব্যবহার করি:

এটি ফায়ারফক্সের উপাদান পরিদর্শন করা থেকে মডেল। এটি একটি পেঁয়াজের মতো কাজ করে:

• আপনার কন্টেন্ট মাঝখানে হয়।
• প্যাডিং আপনার সামগ্রী এবং এটির ভিতরে থাকা ট্যাগের প্রান্তের মধ্যে স্থান।
• সীমানা এবং তার বৈশিষ্ট্য
• মার্জিনটি ট্যাগের চারপাশে স্থান।

সুতরাং বৃহত্তর মার্জিনগুলি বাক্সের চারপাশে আরও বেশি স্থান তৈরি করবে যা আপনার সামগ্রী রয়েছে।

বড় প্যাডিং আপনার সামগ্রী এবং এটির ভিতরে থাকা বাক্সের মধ্যে স্থান বাড়িয়ে তুলবে।

এগুলির কোনওটিই যদি একটি নির্দিষ্ট মানতে সেট করা থাকে তবে বাক্সটির আকার বাড়াতে বা হ্রাস করতে পারে না।

Answer 15

মার্জিন

মার্জিন সাধারণত উপাদান এবং তার চারপাশের মধ্যে একটি স্থান তৈরি করতে ব্যবহৃত হয়।

উদাহরণস্বরূপ আমি যখন এটি কোনও পর্দার প্রান্তগুলিতে আটকে রাখতে এবং কোনও সাদা ফাঁক না দেওয়ার জন্য একটি নাবার তৈরি করছি তখন আমি এটি ব্যবহার করি।

প্যাডিং

আমি যখন সীমানার অভ্যন্তরে কোনও উপাদান <div>বা অনুরূপ কিছু থাকি তখন আমি সাধারণত ব্যবহার করি এবং আমি এর আকার হ্রাস করতে চাই তবে সেই সময়ে আমি তার চারপাশের অন্যান্য উপাদানগুলির মধ্যে দূরত্ব বা মার্জিন রাখতে চাই।

সংক্ষেপে, এটি পরিস্থিতিগত; এটি আপনি যা করার চেষ্টা করছেন তার উপর নির্ভর করে।

Answer 16

মার্জিন বক্সের বাইরে এবং প্যাডিং বাক্সের অভ্যন্তরে

Comments

এটি প্রশ্নের উত্তর দেয় না।

— টাইলারএইচ

@ টাইলার এই সম্পর্কে কেবল জিজ্ঞাসা করলেন ??? (কখন মার্জিন ব্যবহার করবেন এবং কখন প্যাডিং ব্যবহার করবেন?)

— সৌরভগৈল 95৯৯

হ্যাঁ, এটাই তিনি চেয়েছিলেন। এই উত্তরটি কীভাবে প্রতিটি ব্যবহার করবেন?

— টাইলারএইচ