মার্জিন এবং প্যাডিংয়ের মধ্যে পার্থক্য?

371

সিএসএসে মার্জিন এবং প্যাডিংয়ের মধ্যে ঠিক কী পার্থক্য রয়েছে ? এটি আসলে খুব বেশি উদ্দেশ্য হিসাবে কাজ করে বলে মনে হচ্ছে না। পার্থক্যটি কোথায় রয়েছে তার একটি উদাহরণ আপনি দিতে পারেন (এবং কেন পার্থক্যটি জানা গুরুত্বপূর্ণ)?

css

— maclunian
সূত্র

14

stackoverflow.com/questions/2189452/… স্ট্যাকওভারফ্লো / প্রশ্ন / 3060456/… স্ট্যাকওভারফ্লো / প্রশ্ন / 4619899/… অনুসন্ধান থেকে প্রথম তিনটি লিঙ্ক padding vs margin। আমি মনে করি আমাদের অনুসন্ধান বারে তীর যুক্ত করে সবুজ করতে হবে।

— চুন

2

এটি আপনাকে পার্থক্যটি বুঝতে সাহায্য করতে পারে digizol.com/2006/12/margin-vs-padding-css-properties.html

— lkamal

2

আরও সচেতন থাকুন যে ইন্টারনেট এক্সপ্লোরার প্রায় অন্যান্য সমস্ত ব্রাউজারের তুলনায় মার্জিন / সীমানা / প্যাডিং প্রস্থগুলিকে আলাদাভাবে (ডিফল্ট নন-কুইর্কস মোডে) যোগ করে ms

— ডেভিড আর ট্রিবিলে

1

মার্জিন যদি কাজ না করে তবে প্যাডিংয়ের চেষ্টা করুন

— জোয়েলফ্যান

410

paddingবিষয়বস্তু এবং এর মধ্যবর্তী স্থান border, যেখানে marginসীমানার বাইরে স্থান। আমি এখানে একটি গুগল অনুসন্ধান থেকে পাওয়া একটি চিত্র পেয়েছি, যা এই ধারণাটি চিত্রিত করে।

এখানে চিত্র বর্ণনা লিখুন

— এ বি সি ডি
সূত্র

3

একটি সংজ্ঞা জন্য এই সাইটগুলি দেখুন। গ্রাফিক একটি নিখুঁত চিত্র। w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp

— সুরুট

@ ম্যাক্লুনিয়ান: উপরের @ সুরোটের লিঙ্কগুলি ছাড়াও এই সাইটটি w3schools.com/css/css_boxmodel.asp দেখুন ।

— abcd

এটি কীভাবে সামগ্রীর সেট প্রস্থ এবং উচ্চতার সাথে সম্পর্কিত? এই সমস্ত যেখানে পরিমাপ করা হয়?

— নাইয়ারগডস

128

এখানে একটি মূল বিষয় যা উত্তরের জন্য অনুপস্থিত:

শীর্ষ / নীচের মার্জিনগুলি সঙ্কুচিত।

সুতরাং যদি আপনার কাছে একটি এলিমেন্টের নীচে 20px মার্জিন এবং পরবর্তী এলিমেন্টের শীর্ষে 30px মার্জিন থাকে তবে দুটি উপাদানের মধ্যে মার্জিন 50px এর পরিবর্তে 30px হবে। এটি বাম / ডান মার্জিন বা প্যাডিংয়ের ক্ষেত্রে প্রযোজ্য নয়।

— নাথান
সূত্র

6

মনে রাখবেন যে খুব নির্দিষ্ট পরিস্থিতি রয়েছে যেখানে উল্লম্ব মার্জিনগুলি ধসে পড়ে - কেবল দুটি উল্লম্ব মার্জিনই এটি করবে না। যা কেবল এটিকে আরও বিভ্রান্ত করে তোলে (যদি আপনি বক্স মডেলের সাথে খুব পরিচিত না হন )।

— BoltClock

76

মার্জিনটি আপনার এলিমেন্টের বাইরের অংশে প্রয়োগ করা হয় তাই আপনার উপাদান অন্যান্য উপাদান থেকে কতটা দূরে থাকে তা কার্যকর করে।

আপনার উপাদানটির অভ্যন্তরে প্যাডিং প্রয়োগ করা হয় সুতরাং আপনার উপাদানটির সামগ্রী সীমানা থেকে কত দূরে রয়েছে তা প্রভাবিত করে।

এছাড়াও, মার্জিন ব্যবহার করা আপনার উপাদানগুলির মাত্রাগুলিকে প্রভাবিত করবে না যখন প্যাডিংগুলি আপনার উপাদানগুলির মাত্রা (উচ্চতা + প্যাডিং সেট করবে) উদাহরণস্বরূপ যদি আপনার 5 পিএক্স প্যাডিং সহ 100x100px ডিভি থাকে তবে আপনার ডিভটি 105x105px হবে

— LostLin
সূত্র

15

আমি বিশ্বাস করি প্যাডিং প্রতিটি পাশেই প্রয়োগ করা হয়েছে, সুতরাং উপাদানটি হবে 110x110px

— 2013Aker

হ্যাঁ, আফিক প্যাডিং যদি আপনার প্রস্থের ব্যতীত অন্য কোনও কিছুতে সেট করা থাকে তবে আপনার উপাদানটির প্রস্থ পরিবর্তন করবে না auto। প্রস্থটি যদি হয় auto, তবে অতিরিক্ত প্যাডিং সেই অনুযায়ী প্যাডেড উপাদানগুলির প্রস্থকে বাড়িয়ে তুলবে (এবং উভয় পক্ষ থেকে, যেমন @ 2013 এ্যাসকার হিসাবে উল্লিখিত হয়েছে)

— ফ্ল্যাটার

1

আমি মনে করি এটি বিভ্রান্তিকর বলে মনে হচ্ছে যে আপনার ডিভটি 110px দ্বারা 110px হবে কারণ আপনার ডিভের প্রস্থটি এখনও 100px হবে (ধরে নিবেন যে বাক্স-আকার পরিবর্তনকে সামগ্রী-বাক্স হিসাবে সেট করা হয়েছে)।

— wmock

44

এই 3 পয়েন্ট মনে রাখবেন:

মার্জিন অতিরিক্ত স্থান প্রায় নিয়ন্ত্রণ।
প্যাডিং অতিরিক্ত স্থান ভিতরে নিয়ন্ত্রণ।
একটি বাহ্যিক নিয়ন্ত্রণের প্যাডিং হ'ল অভ্যন্তরীণ নিয়ন্ত্রণের মার্জিন ।

ডেমো চিত্র: (যেখানে লাল বাক্সটি ইচ্ছা নিয়ন্ত্রণের)

— sms247
সূত্র

2

পার্থক্যটি জানা কেন গুরুত্বপূর্ণ তা এর উত্তর দেয় না।

— গ্রিনআসজেড

38

সবচেয়ে সহজ সংজ্ঞা; প্যাডিং এমন একটি স্থান যা ধারক উপাদানটির সীমানার ভিতরে দেওয়া হয় এবং মার্জিনটি বাইরে দেওয়া হয়। যে উপাদানটি কোনও ধারক নয়, তার জন্য প্যাডিং বেশি অর্থবোধ করতে পারে না, তবে মার্জিন স্পষ্টতই এটির ব্যবস্থা করতে সহায়তা করবে।

— উইন্ড চিমেজ
সূত্র

30

প্যাডিং হ'ল সীমান্তের অভ্যন্তরে স্থান , যেখানে মার্জিন সীমানার বাইরে স্থান ।

— আবদুল গফুর
সূত্র

25

প্যাডিং

প্যাডিং একটি সিএসএস সম্পত্তি যা একটি উপাদান সামগ্রী এবং এর সীমানার মধ্যে স্থান নির্ধারণ করে (যদি এর কোনও সীমানা থাকে)। যদি কোনও উপাদানটির চারপাশে সীমানা থাকে, প্যাডিং সেই সীমান্ত থেকে সেই উপাদানটির যে উপাদানটিকে প্রদর্শিত হবে সেই উপাদানটিকে স্থান দেবে। যদি কোনও এলিমেন্টের চারপাশে সীমানা না থাকে, তবে প্যাডিং যুক্ত করার কোনও কারণ নেই all উপাদানটির উপর কোনও প্রভাব নেই, কারণ এর থেকে স্থান দেওয়ার কোনও সীমানা নেই।

মার্জিন

মার্জিন একটি সিএসএস সম্পত্তি যা কোনও উপাদানটির বাইরের স্থানটিকে তার পরবর্তী বাইরের উপাদানকে সংজ্ঞায়িত করে।

মার্জিন উভয় সীমানা আছে বা না থাকে এমন উপাদানগুলিকে প্রভাবিত করে। যদি কোনও উপাদানের সীমানা থাকে তবে মার্জিনটি এই সীমানা থেকে পরবর্তী বাহ্যিক উপাদানের জন্য স্থানটি নির্ধারণ করে। যদি কোনও উপাদানের সীমানা না থাকে তবে মার্জিনটি উপাদান সামগ্রী থেকে পরবর্তী বাহ্যিক উপাদানে স্থান নির্ধারণ করে।

প্যাডিং এবং মার্জিনের মধ্যে পার্থক্য

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

— রাকেশ সিং
সূত্র

1

কোন উপাদানগুলির সীমানা নেই?

— সারিম জাভেদ খান

10

মার্জিন এবং প্যাডিংয়ের মধ্যে অন্যতম প্রধান পার্থক্য উত্তরগুলির মধ্যে উল্লেখ করা হয়নি: ক্লিকযোগ্যতা এবং হোভার সনাক্তকরণ

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

এই বিষয়ে অন্য প্রশ্নের উত্তর একটি উদাহরণ দেয়।

— পল
সূত্র

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

— বোল্টক্লক

9

মার্জিন = বাহুতে সীমানা থেকে উপাদানটির চারপাশে (বাইরে)

প্যাডিং = পাঠ্য থেকে সীমানা পর্যন্ত উপাদানটির চারপাশে (ভিতরে) স্থান।

এখানে দেখুন: http://jsfiddle.net/robx/GaMpq/

— robx
সূত্র

9

এটা তোলে মধ্যে পার্থক্য সম্পর্কে জানতে ভালো marginএবং padding। আমার জানা মতে:

মার্জিন হ'ল একটি উপাদানের বাইরের স্থান , আর প্যাডিং হ'ল একটি উপাদানটির অভ্যন্তরীণ স্থান । অন্য কথায়, মার্জিন হ'ল উপাদানটির সীমানার বাইরে স্থান, অন্যদিকে প্যাডিং হ'ল তার সীমানার অভ্যন্তরের স্থান।
আপনি autoমার্জিনে মান সেট করতে পারেন । তবে এটি প্যাডিংয়ের অনুমতি নেই। এই দেখুন ।
দ্রষ্টব্য:margin: auto অনুভূমিকভাবে তার পিতামাতার অভ্যন্তরে কোনও ব্লক উপাদানকে কেন্দ্র করতে ব্যবহার করুন । এছাড়াও, স্বয়ংক্রিয়ভাবে মার্জিন সেট করে কোনও ফ্লেক্সবক্সের অভ্যন্তরে উলম্ব বা অনুভূমিকভাবে বা উভয় ক্ষেত্রেই কোনও উপাদানকে কেন্দ্র করা সম্ভব। এই দেখুন ।
মার্জিন যে কোনও ফ্লোট নম্বর হতে পারে, তবে প্যাডিং negativeণাত্মক হওয়া উচিত নয়।
আপনি যখন কোনও উপাদান স্টাইল করেন, প্যাডিংও স্টাইল করা হবে; তবে মার্জিন নয় মার্জিন পিতামাতার উপাদানটির স্টাইল পায়। উদাহরণস্বরূপ, আপনি যখন background-colorসম্পত্তিটি কালোতে সেট করবেন তখন এর অভ্যন্তরীণ স্থান (অর্থাত্ প্যাডিং) কালো হবে, তবে এর বাইরের স্থান (অর্থাত্ মার্জিন) নয়।

— MAChitgarha
সূত্র

4

মার্জিন বাক্সের বাইরে স্থান; প্যাডিং বাক্সের ভিতরে স্থান। সাদা পূরণের সাথে পার্থক্যটি দেখা শক্ত, তবে রঙিন ফিলের সাহায্যে আপনি এটি সূক্ষ্ম দেখতে পারেন।

— আর্নেস্ট ফ্রেডম্যান-হিল
সূত্র

2

মার্জিন এবং প্যাডিং সত্যই উভয় ধরণের প্যাডিং .... একটি (মার্জিন) উপাদানগুলির সীমানার বাইরে চলে যায় অন্য উপাদান থেকে এটি দূরত্ব করতে এবং অন্যটি (প্যাডিং) উপাদানগুলির সীমানার থেকে সামগ্রীকে দূরে রাখতে উপাদানগুলির বাইরে চলে যায়।

— chunkyboy
সূত্র

2

প্যাডিং বিকাশকারীকে পাঠ্যের মধ্যে স্থান বজায় রাখার অনুমতি দেয় এবং এটি উপাদানকে ঘিরে রাখছে। মার্জিন হল স্থানটি যা উপাদানটি পিতামাতার ডিওমের অন্য একটি উপাদানের সাথে বজায় রাখে।

উদাহরণ দেখুন:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

— রজত
সূত্র

1

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

মার্জিন মান নিম্নলিখিত প্রকারের হতে পারে।

প্রথমত, অটো ব্রাউজারটিকে মার্জিন গণনা করতে দেয়। তদুপরি, দৈর্ঘ্য px, pt বা সেমিতে একটি মার্জিনকে বোঝায়, যখন% অন্তর্ভুক্ত উপাদানগুলির প্রস্থের তুলনায় শতাংশ হিসাবে একটি মার্জিন বর্ণনা করতে সহায়তা করে। পরিশেষে, উত্তরাধিকার সূচিত করে যে মার্জিনটি প্যারেন্ট উপাদান থেকে উত্তরাধিকারী হতে হবে।

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

প্যাডিং মান নিম্নলিখিত প্রকারের হতে পারে।

দৈর্ঘ্য প্যাডিংকে px, pt বা সেমিতে বর্ণনা করে, যখন% প্যাডিংকে উপাদান যুক্ত উপাদানের প্রস্থের সাথে শতাংশ হিসাবে চিহ্নিত করে। পরিশেষে, উত্তরাধিকারী বর্ণনা করে যে প্যাডিংটি প্যারেন্ট উপাদান থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হওয়া উচিত।

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

স্নিপেট প্রসারিত করুন

মার্জিন এবং প্যাডিংয়ের মধ্যে পার্থক্য

মার্জিন একটি সিএসএস সম্পত্তি যা সংজ্ঞায়িত সীমানার বাইরে উপাদানটির চারপাশে স্থান তৈরি করতে ব্যবহৃত হয়, যখন প্যাডিং এমন একটি সিএসএস সম্পত্তি যা সংজ্ঞায়িত সীমানার অভ্যন্তরের উপাদানটির চারপাশে স্থান তৈরি করতে ব্যবহৃত হয়। সুতরাং, এটি মার্জিন এবং প্যাডিংয়ের মধ্যে প্রধান পার্থক্য ব্যাখ্যা করে।

মানগুলি তদ্ব্যতীত, মার্জিনের মানগুলি অটো, দৈর্ঘ্য,% বা উত্তরাধিকারী হতে পারে তবে প্যাডিংয়ের মান দৈর্ঘ্য,% বা উত্তরাধিকারের ধরণের হতে পারে। সুতরাং, এটি মার্জিন এবং প্যাডিংয়ের মধ্যে অন্য পার্থক্য।

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

— আভিড প্রোগ্রামার
সূত্র

0

প্রস্থ এবং উচ্চতা সহ একটি ব্লক ডিভিউতে একটি পটভূমি রঙ লাগানোর চেষ্টা করুন। আপনি দেখতে পাবেন যে প্যাডিং উপাদানটির আকার বাড়িয়ে তোলে, তবে মার্জিনটি এটি নথির প্রবাহের মধ্যে সরিয়ে দেয়।

মার্জিন বিশেষত উপাদানটি স্থানান্তর করার জন্য।

— হেনরি
সূত্র

0

প্যাডিং হ'ল ওয়েব পৃষ্ঠায় নিকটতম উপাদানগুলির মধ্যে স্থান এবং মার্জিন হ'ল ওয়েবপৃষ্ঠার মার্জিন থেকে স্থান।

— prabeesh rk
সূত্র

0

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

— creswei
সূত্র

-1

একটি গুরুত্বপূর্ণ পার্থক্য রয়েছে:

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

— আর্স
সূত্র

-1

মার্জিনটি আপনার এলিমেন্টের বাইরের অংশে প্রয়োগ করা হয় তাই আপনার উপাদান অন্যান্য উপাদান থেকে কতটা দূরে থাকে তা কার্যকর করে।

আপনার উপাদানটির অভ্যন্তরে প্যাডিং প্রয়োগ করা হয় সুতরাং আপনার উপাদানটির সামগ্রী সীমানা থেকে কত দূরে রয়েছে তা প্রভাবিত করে।

এছাড়াও, মার্জিন ব্যবহার করা আপনার উপাদানগুলির মাত্রাগুলিকে প্রভাবিত করবে না যখন প্যাডিংগুলি আপনার উপাদানগুলির মাত্রা (উচ্চতা + প্যাডিং সেট করবে) উদাহরণস্বরূপ যদি আপনার 5 পিএক্স প্যাডিং সহ 100x100px ডিভি থাকে তবে আপনার ডিভটি 105x105px হবে

— শ্যামল কপরি
সূত্র

আপনি কি উত্তরটি ইতিমধ্যে দেওয়া হয়েছে তা লক্ষ্য করেছেন? - এবং একটি যুক্ত এবং উপযুক্ত জোর দিয়ে?

— জেরিওল

-1

মূলত, প্যাডিং এবং মার্জিনের মধ্যে পার্থক্য পটভূমির ক্ষেত্রে আসে। প্যাডিং সামগ্রীগুলির মধ্যে স্থান নির্ধারণ করবে, যখন মার্জিন উপাদানগুলির বাইরের প্রান্তটি স্থির করবে!

— বিনহ দাত হা
সূত্র

-7

প্যাডিং হ'ল আপনার সামগ্রী এবং সীমান্তের মধ্যে স্থান। কোথায় মার্জিন মধ্যে স্থান হিসাবে সীমানা এবং অন্যান্য উপাদান।

— আলি মামুন রিজওয়ান
সূত্র

1

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

— কুইন্টিন

2

আপনি কেবল পূর্ববর্তী উত্তরগুলি পুনরাবৃত্তি করেছেন।

— জনরো পাওলো ক্যামাক