সিএসএসে নেতিবাচক মার্জিন কীভাবে কাজ করে এবং কেন (মার্জিন-শীর্ষ: -5! = মার্জিন-নীচে: 5)?

108

উলম্ব অবস্থানের উপাদানগুলির জন্য একটি সাধারণ কৌশলটি নিম্নলিখিত সিএসএস ব্যবহার করা হয়:

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

যখন ক্রোমের মতো মেট্রিক ভিউতে দেখা হয় আপনি যা দেখেন এটি এটি:

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

যাইহোক, আপনি যখন উপাদানটির উপর দিয়ে ঘুরে দেখেন তখন কোনও ভিজ্যুয়াল মার্জিন চিত্রিত হয় না যেমন মার্জিনটি সীমানার 'বাহিরে' থাকে এবং ভিজ্যুয়ালাইজ করা যায়। কিন্তু নেতিবাচক মার্জিনগুলি প্রদর্শিত হবে না। তারা কীভাবে দেখায় এবং এটি কী এটি আলাদা করে তোলে?

কেন একরকম margin-top:-8px নয় margin-bottom:8px ?

সুতরাং ঠিক কীভাবে নেতিবাচক মার্জিনগুলি কাজ করে এবং তাদের পিছনে স্বজ্ঞাততা কী। কীভাবে তারা margin-top < 0কোনও আইটেম 'বাম্প' করবে ?

css margin

— পিএইচডি
সূত্র

89

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

উদাহরণস্বরূপ, আপনার নমুনা কোডের রেন্ডারিং সিএসএস স্পেক দ্বারা পরিচালিত হয়েছে যেমন একেবারে অবস্থানযুক্ত অ-প্রতিস্থাপনকারী উপাদানগুলির জন্য উচ্চতা এবং মার্জিন গণনাতে বর্ণিত হয়েছে ।

যদি আমি গ্রাফিকাল উপস্থাপনা করতে পারি তবে আমি সম্ভবত এরকম কিছু নিয়ে যেতে পারি (স্কেল না করে):

নেতিবাচক শীর্ষ মার্জিন

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

বোনাস:

এখনও বিশ্বাসী প্রয়োজন যে চশমা পড়া হয় (যেমন বিরোধিতা যেতে উপায় ভালো নিবন্ধ )? আমি দেখতে পাচ্ছি আপনি উপাদানটিকে উল্লম্বভাবে কেন্দ্র করার চেষ্টা করছেন, তবে আপনাকে সেট করতে হবে এবং কেন না ?margin-top:-8px;margin-top:-50%;

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

— ওভার
সূত্র

84

আমি দৃষ্টিকোণভাবে এটি ব্যাখ্যা করার চেষ্টা করব:

/**
 * explaining margins
 */

body {
  padding: 3em 15%
}

.parent {
  width: 50%;
  width: 400px;
  height: 400px;
  position: relative;
  background: lemonchiffon;
}

.parent:before,
.parent:after {
  position: absolute;
  content: "";
}

.parent:before {
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: dashed 1px #ccc;
}

.parent:after {
  left: 0;
  right: 0;
  top: 50%;
  border-top: dashed 1px #ccc;
}

.child {
  width: 200px;
  height: 200px;
  background: rgba(200, 198, 133, .5);
}

ul {
  padding: 5% 20px;
}

.set1 .child {
  margin: 0;
  position: relative;
}

.set2 .child {
  margin-left: 75px;
  position: relative;
}

.set3 .child {
  margin-left: -75px;
  position: relative;
}


/* position absolute */

.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}

.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}

.set6 .child {
  top: 50%; /* level from which margin-top starts 
	- downwards, in the case of a positive margin
	- upwards, in the case of a negative margin	
	*/
  left: 50%; /* level from which margin-left starts 
	- towards right, in the case of a positive margin
	- towards left, in the case of a negative margin	
	*/
  margin: -75px;
  position: absolute;
}

<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
  <div class="child">
    <pre>
.set1 .child {
  margin: 0;
  position: relative;
}
		</pre>
  </div>
</div>

<h3>Set 2</h3>
<div class="parent set2">
  <div class="child">
    <pre>
.set2 .child {
  margin-left: 75px;
  position: relative;
}
		</pre>
  </div>
</div>

<h3>Set 3</h3>
<div class="parent set3">
  <div class="child">
    <pre>
.set3 .child {
  margin-left: -75px;
  position: relative;
}
		</pre>
  </div>
</div>

<h2><code>position: absolute;</code></h2>

<h3>Set 4</h3>
<div class="parent set4">
  <div class="child">
    <pre>
.set4 .child {
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
}
		</pre>
  </div>
</div>

<h3>Set 5</h3>
<div class="parent set5">
  <div class="child">
    <pre>
.set5 .child {
  top: 50%;
  left: 50%;
  margin-left: 75px;
  position: absolute;
}
		</pre>
  </div>
</div>

<h3>Set 6</h3>
<div class="parent set6">
  <div class="child">
    <pre>
.set6 .child {
  top: 50%;
  left: 50%;
  margin: -75px;
  position: absolute;
}
		</pre>
  </div>
</div>

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

— বাণীসংগ্রহ
সূত্র

33

মার্জিন হ'ল আপনার উপাদানটির বাইরে ব্যবধান, যেমন প্যাডিং হ'ল আপনার উপাদানটির ভিতরে ব্যবধান।

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

— ডেভিড হেডলুন্ড
সূত্র

2

+1 আমি আপনার উত্তর পছন্দ করি। শব্দগুলি ইনজেকশনের মাধ্যমে এটি উন্নত করা যেতে পারে onsetএবং offset। এটি সত্য যে বহু লোক যখন তাদের অর্থ ( ধনাত্মক ) হয় তখন সর্বদা শব্দ offset( নেতিবাচক ) ব্যবহার করে । আপনি যদি নিজের উত্তরটি আপডেট করেন তবে এই বার্তাটি স্ব-ধ্বংস করবে। চিয়ার্স! onset

— আর্টট্রনিক্স

1

কি হবে margin-bottom: -8px;? কেন একরকম margin-bottom:-8pxনয় margin-top:-8px?

— রিক

27

-8px এর মার্জিন-শীর্ষের অর্থ এটি 0 মার্জিনের চেয়ে 8px বেশি হবে।

8px এর একটি মার্জিন-নীচের মানে এর নীচের জিনিসটি আরও নীচে 8px হবে যে এর 0 টি মার্জিন থাকলে।

— ধনী ব্র্যাডশো
সূত্র

1

আমি কেবল জিনিসগুলিকে সরল রাখার চেষ্টা করছিলাম, তবে আমি সম্মত হই, এটি সম্ভবত আমার উত্তরগুলির মধ্যে সবচেয়ে খারাপ লেখা!

— ধনী ব্র্যাডশও

2

আমি মনে করি উত্তরটি বেশ ভাল। আমাদের অর্ধেকটি এটি পায় না এমন উচ্চ প্রযুক্তিগত উত্তরগুলির ব্যবহার নেই।

— 945

1

কি হবে margin-bottom: -8px;? কেন একরকম margin-bottom:-8pxনয় margin-top:-8px?

— রিক

22

এখানে ইতিমধ্যে ভাল পয়েন্ট তৈরি হয়েছে, তবে ব্রাউজার দ্বারা মার্জিন রেন্ডারিং কীভাবে সম্পন্ন হয় সে সম্পর্কে প্রচুর তথ্য থাকা সত্ত্বেও কেন এখনও এর যথেষ্ট উত্তর দেওয়া হয়নি:

"মার্জিন-টপ: -8px মার্জিন-নীচে: 8px এর সমান কেন নয়?"

আমরা যা চাইতে পারি তা হ'ল:

পূর্ববর্তী উপাদানগুলিকে কেন একটি ধনাত্মক নীচের মার্জিনটি 'ধাক্কা' দেয় না, যখন একটি ইতিবাচক শীর্ষ-মার্জিন নিম্নলিখিত উপাদানগুলিকে 'টপকে' যায়?

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

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

নিম্নলিখিত এইচটিএমএল বিবেচনা করুন:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

কোডে তাদের অবস্থানের সাথে সাদৃশ্যযুক্ত, এই তিনটি বাক্স ব্রাউজারে 'টপ-ডাউন' সজ্জিত প্রদর্শিত হয় ( জিনিসগুলি সহজ রেখে, আমরা এখানে orderCSS3 'ফ্লেক্স-বক্স' মডিউলটির সম্পত্তি বিবেচনা করব না )। সুতরাং, যখনই স্টাইল 3 বাক্সে প্রয়োগ করা হয়, পূর্ববর্তী উপাদানগুলির অবস্থানগুলি (বাক্স 1 এবং 2 এর জন্য) ইতিমধ্যে নির্ধারিত হয়ে গেছে এবং রেন্ডারিং গতির জন্য আর কোনও পরিবর্তন করা উচিত নয়।

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

boxণাত্মক এবং ধনাত্মক উভয়ই বাক্স 3 এর নীচে মার্জিনে প্রযোজ্য: ইতিমধ্যে মূল্যায়ন করা উপাদানগুলিকে প্রভাবিত করার পরিবর্তে, আসন্ন উপাদানগুলির জন্য কেবলমাত্র একটি নতুন 'সূচনা পয়েন্ট' নির্ধারিত হয়। এইভাবে একটি ইতিবাচক নীচে মার্জিন ধাক্কা হবে সেটিং নিম্নলিখিত নিচে উপাদান; একটি নেতিবাচক তাদের ধাক্কা দেবে।

— schellmax
সূত্র

সেরা উত্তর। এটি একটি "কেন" ব্যাখ্যা করছে, অন্য উত্তরগুলি কেবল "কীভাবে" তা ব্যাখ্যা করে।

— আমির হোসেইন আহমদী

1

এই উত্তরটি কেন আরও ভাল তা বুঝতে আমাকে সহায়তা করেছিল। আপনাকে @ শেলম্যাক্স ধন্যবাদ

— iRamesh

3

আপনি নিখুঁত অবস্থান ব্যবহার করেছেন এবং একটি শীর্ষ শতাংশ নির্দিষ্ট করেছেন বলে কেবলমাত্র মার্জিন-টপ আপনার .item অবজেক্টের অবস্থানকে প্রভাবিত করবে। পরিবর্তে আপনি নীচে ব্যবহার করে এটি অবস্থান: 50%, তবে এটি কেন্দ্র করতে আপনার মার্জিন-ডাউন -8px প্রয়োজন এবং মার্জিন-শীর্ষের কোনও প্রভাব থাকবে না।

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

আপনার সিএসএস ব্রাউজারটিকে পৃষ্ঠাটির নীচে 50% পয়েন্টে আপনার এলিমেন্টের শীর্ষস্থানটি মার্জিনের অবস্থানে রাখতে বলে। যাইহোক, সমস্ত উপাদান একক পিক্সেল নয়, তাই ব্রাউজারটি এটির কোন অংশটি পৃষ্ঠা থেকে 50% পথ অবধি লাইন করতে হবে তা জানতে হবে। উপাদানটির শীর্ষে রেখার জন্য, এটি শীর্ষ মার্জিন ব্যবহার করে। ডিফল্টরূপে এটি উপাদানটির শীর্ষের সাথে সামঞ্জস্যপূর্ণ তবে আপনি এটি CSS এর মাধ্যমে পরিবর্তন করতে পারবেন।

আপনার ক্ষেত্রে, শীর্ষ 50% ফলাফলের পৃষ্ঠার মাঝামাঝি থেকে শুরু উপাদানের শীর্ষে পরিণত হবে। নেতিবাচক শীর্ষের মার্জিন প্রয়োগ করে, ব্রাউজারটি শীর্ষ থেকে এলিমেন্টে 8px পয়েন্টটি ব্যবহার করে (অর্থাত্ এর মাঝখানে রেখাটি) 50% অবস্থানে রাখে।

যদি আপনি নীচে একটি ইতিবাচক মার্জিন প্রয়োগ করেন, এটি ব্রাউজারটি নীচে থেকে উপাদানটি দূরে রাখার জন্য লাইনটি প্রসারিত করে, এর এবং নীচের যে কোনও সংলগ্ন উপাদানের মধ্যে একটি ফাঁক দেয়, বা এটি নির্ভর করে যেখানে অবস্থানের ভিত্তিতে অবস্থিত থাকলে একেবারে স্থাপন করা হয়েছে নিচে.

— রব ট্রাইকি
সূত্র

+1 টি। জ্ঞান করে তোলে ... এটা চাক্ষুষ cues সঙ্গে এটি বৃদ্ধির জন্য তাই হিসাবে সম্পূর্ণ করতে মহান হতে চাই কল্পনা ।

— পিএইচডি

3

আমি অবাক হয়েছি যদি এই প্রশ্নের উত্তরের উত্তর দেওয়া হয়: সিএসএস মার্জিন কীভাবে কাজ করে এবং কেন এটি মার্জিন-শীর্ষ: -5; মার্জিন-নীচের মতো নয়: 5 ;?

মার্জিন উপাদানটির চারপাশ থেকে দূরত্ব। মার্জিন-টপ বলে "... উপাদানটির 'বক্স' এর শীর্ষ 'পাশ' থেকে পরিমাপ করার সাথে সাথে 'বক্স' এর নীচে 'পাশ' থেকে দূরত্ব হ'ল মার্জিন-নীচে"। তারপরে মার্জিন-শীর্ষ: 5; শীর্ষ 'পাশ' ঘের সঙ্গে সম্পর্কিত, এই ক্ষেত্রে -5; শীর্ষে 'পাশ' থেকে আগত যেকোনও উপাদানগুলির শীর্ষ 'পাশ' 5 এবং মার্জিন-নীচে ওভারল্যাপ করতে পারে: 5; এর অর্থ এলিমেন্ট বটম 'পার্শ্ব' এবং চারপাশের মধ্যে দূরত্ব 5 is

মূলত এটি তবে ভাসমান উপাদান এবং এর মতো দ্বারা প্রভাবিত: http://www.w3.org/TR/CSS2/box.html#margin-properties ।

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

আমি সংশোধন করা দাঁড়ানো।

— হতে পারে
সূত্র