মার্জিন-সংঘাতকে কীভাবে অক্ষম করবেন?

Question

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

Comments

ফ্লেক্স বা গ্রিড লেআউট ব্যবহার করুন, যেখানে মার্জিন ভেঙে উপস্থিত নেই: stackoverflow.com/a/46496701/3597276

— মাইকেল বেঞ্জামিন

কেবল উপাদানগুলিকে কেবল একটি মান দিন margin-bottomতবে margin-top0 হিসাবে ছেড়ে দিন

— ড্যান ব্রে

গণনাটি সহজ করার জন্য আমি একটি প্যাকেজ তৈরি করেছি: npmjs.com/package/collapsed-margin

— ওয়ান এম

Answer 1

মার্জিন ধসের প্রধান দুটি ধরণ রয়েছে:

• সংলগ্ন উপাদানগুলির মধ্যে মার্জিন ভেঙে যাচ্ছে
• পিতা-মাতা এবং সন্তানের উপাদানগুলির মধ্যে মার্জিন ভেঙে যাচ্ছে

একটি প্যাডিং বা সীমানা ব্যবহার কেবলমাত্র পরবর্তী ক্ষেত্রে পতন রোধ করবে। এছাড়াও, পিতামাতার কাছে প্রয়োগ করা overflowএর ডিফল্ট ( visible) থেকে আলাদা কোনও মান হ্রাস রোধ করবে। সুতরাং, উভয় overflow: autoএবং overflow: hiddenএকই প্রভাব থাকবে। hiddenপিতামাতার একটি নির্দিষ্ট উচ্চতা থাকলে বিষয়বস্তু লুকানোর অযৌক্তিক পরিণতিটি সম্ভবত ব্যবহার করার সময় কেবলমাত্র তফাত ।

অন্যান্য বৈশিষ্ট্য যা একবার পিতামাতার সাথে প্রয়োগ করা হয়, তারা এই আচরণটি ঠিক করতে সহায়তা করতে পারে:

• float: left / right
• position: absolute
• display: inline-block / flex

আপনি সেগুলি এখানে পরীক্ষা করতে পারেন: http://jsfiddle.net/XB9wX/1/ ।

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

সূত্র: SitePoint এর নিবন্ধ ধ্বসে মার্জিন

Comments

নোট করুন যে প্যাডিং এটির প্রভাব ফেলতে পারে যদি এটি শূন্য মান না হয়

— ম্লাদেন জঞ্জেটভিক

দ্রষ্টব্য যে overflow: autoস্ক্রোলবারগুলি মূল উপাদান হিসাবে ওভারফ্লোতে প্রবাহিত না করে প্যারেন্ট উপাদানটিতে উপস্থিত হতে পারে overflow: visible।

— লিও

'ওভারফ্লো: অটো' Chrome v44 তে কাজ করে না বলে মনে হচ্ছে।

— tkane2000

প্রদর্শনের জন্য ধন্যবাদ: ইনলাইন-ব্লক, এটি আমাকে বাঁচিয়েছে :)

— অ্যালেক্স্যাসালবোনি

flexএর ডিফল্ট থেকে আলাদা কোনও মানও মার্জিন ধসে অক্ষম করবে

— অলি

Answer 2

আপনি এটির জন্য ভাল পুরানো মাইক্রো ক্লিয়ারফিক্সও ব্যবহার করতে পারেন।

#container:before, #container:after{
    content: ' ';
    display: table;
}

আপডেট করা ফিডল দেখুন: http://jsfiddle.net/XB9wX/97/

Comments

আমার উত্তরটিকে একটি সম্প্রদায়ের উইকিতে পরিণত করেছে। আপনার উত্তর দিয়ে এটি বিনা দ্বিধায় দয়া করে। ধন্যবাদ।

— hqcasanova

আমি এটি পাই না, যখন আমি উদাহরণটি দেখি যে মার্জিনগুলি ভেঙে পড়ছে (20px এর পরিবর্তে ডিভের মধ্যে কেবল 10px উল্লম্ব স্থান)

— অ্যান্ডি

এটি কেবলমাত্র ভাইবোনদের মধ্যেই পতন দূর করতে সহায়তা করে যা এই ক্লিয়ারফিক্স প্রয়োগ করেছে। আমি এটি দেখানোর জন্য উদাহরণটি কাঁটা করেছি: jsfiddle.net/dpyuyg07 --- এমনকি এটি পুরো গল্প নয়। এটি কেবলমাত্র সেই উপাদানগুলির বাচ্চাদের থেকে মার্জিনের পতন সরিয়ে দেয় যেখানে আপনি এই ফিক্সটি প্রয়োগ করেছেন। যদি আপনি নিজেই ধারকটিতে

— নিকবাইট

আমি এটিকে আরও স্পষ্টভাবে বলতে পারি: ক্লিয়ারফিক্স পদ্ধতিটি কেবলমাত্র বাবা-মা এবং বাচ্চাদের মধ্যে মার্জিন ভেঙে যাওয়া রোধ করে। এটি সংলগ্ন ভাইবোনদের মধ্যে ধসের প্রভাব ফেলে না।

— নিকব্রেট

আমি মনে করি যে আমি এখন বুটস্ট্র্যাপের ডিওএম :beforeএবং :afterউপাদানগুলি পূরণ করার প্রবণতাটি বুঝতে পারি । আমি এখন আমার স্টাইলশীট এই নিয়মের সাথে জুড়েছে: div:before, div:after{content: ' '; display: table;}। ফ্যান্টাস্টিক। হঠাৎ করে স্টাফগুলি প্রত্যাশা অনুযায়ী আচরণ শুরু করে।

— স্টিজন ডি উইট

Answer 3

মার্জিন ভেঙে ফেলা নিষ্ক্রিয় করার জন্য একটি ঝরঝরে কৌশল যা আমি জানি, পিতামাতার প্যাডিং সেট করে দিচ্ছে 0.05px:

.parentClass {
    padding: 0.05px;
}

প্যাডিংটি এখন আর 0 নেই বিধায় collaালু ঘটনা আর ঘটবে না তবে একই সময়ে প্যাডিংটি যথেষ্ট ছোট যা দৃশ্যত এটি 0 এর উপরে চলে যাবে।

যদি অন্য কোনও প্যাডিং পছন্দসই হয়, তবে কেবলমাত্র সেই "দিকনির্দেশে" প্যাডিং প্রয়োগ করুন যেখানে মার্জিন ভেঙ্গে যাওয়া পছন্দসই নয়, উদাহরণস্বরূপ padding-top: 0.05px;।

কাজের উদাহরণ:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

সম্পাদনা: মানটি থেকে পরিবর্তিত 0.1হয়েছে 0.05। ক্রিস মরগান যেমন একটি মন্তব্য নমুনা হিসাবে উল্লেখ করেছেন, এবং এই ছোট পরীক্ষা থেকে , সম্ভবত ফায়ারফক্স 0.1pxপ্যাডিং বিবেচনা করা হয়। যদিও, 0.05pxকৌশলটি মনে হচ্ছে।

Comments

এটি আমার প্রিয় সমাধান। এমনকি আপনি এটি ডিফল্ট শৈলী হিসাবে অন্তর্ভুক্ত করতে পারেন। কেন না? *{padding-top:0.1px}। আমরা কি নিশ্চিত যে এটি সমস্ত ব্রাউজারে কাজ করে?

— নিক ম্যানিং

আমার জন্য এতদূর সুন্দর কাজ করেছেন, তবে বেশিরভাগ ব্রাউজারে এটি পুরোপুরি পরীক্ষা করে নেওয়ার দাবি আমি করি না।

— নিকু সুরডু

খুব সুন্দর সমাধান, এটি বেশিরভাগ ব্রাউজারগুলিতে প্রত্যাশা অনুযায়ী কাজ করবে বলে মনে হয়। এটি ভাগ করে নেওয়ার জন্য ধন্যবাদ!

— ওয়্যারলেডফিন

এই চতুর সমাধান শব্দটি নেই উচ্চ DPI প্রদর্শনগুলির এবং subpixel গণনার কারণে বিভিন্ন পরিস্থিতিতে অতিরিক্ত পিক্সেল যোগ করুন,। (ফায়ারফক্স যুগে যুগে উপ-পিক্সেল লেআউটটি করেছে, আমি বিশ্বাস করি যে অন্যান্য ব্রাউজারগুলি সম্প্রতি তুলনামূলকভাবে মামলা অনুসরণ করেছে))

— ক্রিস মরগান

0.05pxএখনও একটি নির্দিষ্ট পছন্দ মতো মনে হচ্ছে, এলোমেলো ব্রাউজারের ট্রিকারি নম্বর নয়, আমি পছন্দ করব 0.01px।

— ভোলকার ই।

Answer 4

overflow:hidden মার্জিন ভেঙে যাওয়া রোধ করে তবে এটি পার্শ্ব প্রতিক্রিয়া মুক্ত নয় - যথা এটি ... ওভারফ্লো লুকায়।

এটি তৈরি করুন এবং আপনি যা উল্লেখ করেছেন কেবল এটির সাথে সরাসরি শিখতে হবে এবং তারা সত্যিকারের উপযোগী হলে এই দিনটি শিখতে হবে (প্রতি 3 থেকে 5 বছর পরে আসে)।

Comments

আমার উত্তরটিকে একটি সম্প্রদায়ের উইকিতে পরিণত করেছে। আমি মনে করি আপনি দ্বিতীয় অনুচ্ছেদের শেষ দুটি লাইনে উল্লিখিত পার্শ্ব-প্রতিক্রিয়াটি আমি কভার করেছি: পিতামাতার একটি নির্দিষ্ট উচ্চতা থাকলে যদি লুকানো ব্যবহার করা হয় তবে কেবলমাত্র লিখিত বিষয়বস্তু আড়াল করার অযৌক্তিক পরিণতি । তবে যদি আপনার মনে হয় যে এর আরও ব্যাখ্যা দরকার তবে দয়া করে অবদান রাখবেন না। ধন্যবাদ।

— hqcasanova

overflow: autoলুকানো ওভারফ্লো রোধ করতে এবং এখনও ভেঙে যাওয়া মার্জিনগুলি রোধ করতে ব্যবহার করা ভাল।

— গাভিন

@ গ্যাভিন, overflow:auto;আমার সামগ্রীর ক্ষেত্রটিকে কিছু পৃষ্ঠায় একটি স্ক্রোলবার অর্জন করেছে।

— রিড

Answer 5

প্রকৃতপক্ষে, এমন একটি আছে যা নির্দোষভাবে কাজ করে:

প্রদর্শন: ফ্লেক্স; নমনীয় দিক: কলাম;

যতক্ষণ না আপনি কেবলমাত্র আইই 10 এবং আরও বেশি সমর্থন করে বেঁচে থাকতে পারেন

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Comments

এটি জেনেরিক সমাধান হিসাবে কাজ করার জন্য, একটির <div>মধ্যে একটি অতিরিক্ত যুক্ত .containerকরতে .containerহবে , অন্যথায় এটি তার বাচ্চাদের বাক্স-মডেলটি নিয়ন্ত্রণ করবে। উদাহরণস্বরূপ, ইনলাইন উপাদানগুলি পূর্ণ-প্রস্থের ব্লক উপাদানগুলিতে পরিণত হবে; যদি তাদের মার্জিন থাকে তবে সেগুলিও মার্জিন-ভেঙে পড়বে।

— zupa

Answer 6

প্রতিটি ওয়েবকিট ভিত্তিক ব্রাউজারের বৈশিষ্ট্যগুলি সমর্থন করা উচিত -webkit-margin-collapse। এটি কেবল শীর্ষ বা নীচের মার্জিনের জন্য সেট করার জন্য সাব-প্রপার্টিও রয়েছে। আপনি এটিকে মানগুলি ধসে পড়তে (ডিফল্ট) দিতে পারেন, বাতিল করতে পারেন (প্রতিবেশী মার্জিন থাকলে 0-তে মার্জিন সেট করে) এবং পৃথক (মার্জিন পতন রোধ করে)।

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

সম্পূর্ণ ব্যাখ্যার জন্য অ্যাপলের সাফারি সিএসএস রেফারেন্সটি পড়ুন ।

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

Comments

এটি দুর্দান্ত কারণ এটি সাফারি এবং ক্রোম কীভাবে মার্জিনকে মোকাবেলা করে তার মধ্যে একটি অসঙ্গতি ছড়িয়ে দিতে আমাদের সহায়তা করে।

— bjudson

Answer 7

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

Comments

এটি কেবলমাত্র তার শিশু উপাদানগুলির জন্যই নয় - এটি পিতামাতা এবং প্রথম এবং শেষ সন্তানের মধ্যে মার্জিন ভেঙ্গে যাওয়াও রোধ করে।

— সোভেন মার্নাচ

Answer 8

পিতা বা মাতা positionআত্মীয়কে সেট করার কারণে মার্জিন ধসে আমার একই সমস্যা ছিল । মার্জিন ভেঙে ফেলা নিষ্ক্রিয় করতে আপনি যে আদেশগুলি ব্যবহার করতে পারেন তার তালিকা এখানে।

পরীক্ষার জন্য এখানে প্লেগ্রাউন্ড

কেবল যে কোনো দায়িত্ব অর্পণ করা চেষ্টা parent-fix*করতে বর্গ div.containerউপাদান, বা কোনো শ্রেণী children-fix*থেকে div.margin। আপনার প্রয়োজনের সাথে সবচেয়ে ভাল ফিট করে এমন একটি চয়ন করুন।

কখন

• মার্জিন ভাঙ্গা অক্ষম করা হয়েছে , div.absoluteলাল ব্যাকগ্রাউন্ডের সাথে পৃষ্ঠার একেবারে শীর্ষে অবস্থান করা হবে।
• মার্জিন ভেঙে div.absolute একই ওয়াই স্থানাঙ্ক হিসাবে অবস্থিত হবেdiv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

এখানে jsFiddle এখানে উদাহরণস্বরূপ আপনি সম্পাদনা করতে পারেন

Answer 9

আরও নতুন ব্রাউজারে (আইই 11 বাদে) পিতা-সন্তানের মার্জিন ভেঙে যাওয়া রোধ করার জন্য একটি সহজ সমাধান ব্যবহার করা display: flow-root। তবে, সংলগ্ন উপাদানগুলির পতন রোধ করতে আপনার এখনও অন্য কৌশলগুলির প্রয়োজন হবে।

ডেমো (আগে)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

ডেমো (পরে)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Answer 10

আপনার তথ্যের জন্য আপনি গ্রিড ব্যবহার করতে পারেন তবে পার্শ্ব প্রতিক্রিয়া সহ :)

.parent {
  display: grid
}