সিএসএসের মার্জিন / প্যাডিং শতাংশ কেন সর্বদা প্রস্থের বিপরীতে গণনা করা হয়?

Question

আপনি যদি সিএসএস বক্স মডেল বৈশিষ্টটি দেখুন , আপনি নিম্নলিখিতগুলি পর্যবেক্ষণ করবেন:

[মার্জিন] শতাংশটি উত্পাদিত বাক্সযুক্ত ব্লকটির প্রস্থের সাথে সম্মান করে গণনা করা হয় । মনে রাখবেন যে এটি 'মার্জিন-টপ' এবং 'মার্জিন-ডাউন' এর ক্ষেত্রেও সত্য। যদি ধারণকৃত ব্লকের প্রস্থটি এই উপাদানটির উপর নির্ভর করে তবে ফলাফল লেআউটটি সিএসএস ২.১ এ সংজ্ঞায়িত করা আছে। (জোর আমার)

এটা আসলে সত্য। তবে কেন ? পৃথিবীতে কি এইভাবে ডিজাইন করতে কাউকে বাধ্য করবে? আপনি যেখানে চান সেখানে দৃশ্যাবলী চিন্তা করা সহজ, উদাহরণস্বরূপ পৃষ্ঠার উপরের অংশ থেকে একটি নির্দিষ্ট জিনিস সর্বদা 25% নীচে থেকে যায় তবে আপনি উল্লম্ব প্যাডিংয়ের অনুভূমিক আকারের সাথে সামঞ্জস্য থাকতে চান এমন কোনও কারণ নিয়ে আসা কঠিন it's পিতামাতা.

এখানে আমি যে প্রপঞ্চটি উল্লেখ করছি তার একটি উদাহরণ:

<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
  This div is 200x800.
  <div style="border: 1px solid blue; margin: 10% 0 0 10%;">
    This div has top-margin of 10% and left-margin of 10% with respect to its parent.
  </div>
</div>

http://jsfiddle.net/8JDYD/

Comments

আমার প্রাথমিক ধারণাটি হ'ল এটির margin: 25%অর্থ কী তা নিয়ে দ্বিধা তৈরি করে । কোডটি এটির প্রস্তাব দিলেও এটি একটি এমনকি মার্জিন হবে না। এটির ব্যাক আপ করার কোনও প্রমাণ আমার কাছে নেই, তবে এটি যুক্তিসঙ্গত বলে মনে হয়।

— রায়ান কিনাল

আমার চিন্তার jsFiddle । প্রস্থের চেয়ে উচ্চতা অনেক বেশি পরিবর্তনযোগ্য, সুতরাং যখনই সামগ্রী পরিবর্তন হবে তখন এটি মার্জিনকে কঠিন-পূর্বাভাসের উপায়ে স্থানান্তরিত করবে।

— রিচার্ড টাওয়ার্স

@ রায়ান: এটি সত্য, এটি এমনকি কোনও মার্জিন হবে না, তবে আবার যদি আপনি বলেন যে height: 10%; width: 10%আপনি একটি বর্গ উপাদানও পাবেন না।

— এমকিপিপি

মতে dev.w3.org/csswg/css3-box/#the-margin-properties এটি যুক্তরাষ্ট্রের Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).সুতরাং এটি উভয় উপায় যায়

— আদম এখনও বিক্রয়ের

@ রায়ান আমি মনে করি আমাদের বিজয়ী আছে। ডেমোটির জন্য এখানে সন্ধান করুন - জেএসফিডাল

— রিচার্ড

Answer 1

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

মৌলিক উচ্চতা বাচ্চাদের উচ্চতা দ্বারা সংজ্ঞায়িত করা হয়। যদি কোনও উপাদানের প্যাডিং-শীর্ষ থাকে: 10% (পিতামাতার উচ্চতার তুলনায়), এটি পিতামাতার উচ্চতাকে প্রভাবিত করবে। যেহেতু সন্তানের উচ্চতা পিতামাতার উচ্চতার উপর নির্ভরশীল, এবং পিতামাতার উচ্চতা সন্তানের উচ্চতার উপর নির্ভরশীল, তাই আমাদের হয় হয় ভুল উচ্চতা বা একটি অসীম লুপ। অবশ্যই, এটি কেবলমাত্র সেই ক্ষেত্রে প্রভাবিত করে যেখানে প্যারেন্ট === পিতামাতার অফসেট হয় তবে এখনও still এটি একটি অদ্ভুত ঘটনা যা সমাধান করা কঠিন।

আপডেট: শেষ দু'টি বাক্য সম্পূর্ণ সঠিক নাও হতে পারে। পাতার উপাদানগুলির উচ্চতা (কোনও শিশু নেই এমন শিশু) এর উপরে থাকা সমস্ত উপাদানগুলির উচ্চতার উপর প্রভাব ফেলে, তাই এটি অনেকগুলি বিভিন্ন পরিস্থিতিতে প্রভাবিত করে।

Comments

মনে রাখবেন যে এই নিয়মের ব্যতিক্রম রয়েছে - CSS2.1 এর 10.6 সেকশনে বিভিন্ন ধরণের বাক্সের জন্য উচ্চতা গণনা করার প্রায় সমস্ত দস্তাবেজ রয়েছে। এবং প্রকৃতপক্ষে, যেসব ক্ষেত্রে উচ্চতা পিতামাতা এবং সন্তানের মধ্যে একটি স্বনির্ভরতা জড়িত সেগুলি অনির্ধারিত আচরণের দিকে পরিচালিত করে।

— বোল্টক্লক

@ সানজয়পয়েজার আমি খুব সহজ ক্ষেত্রে অনুমান করতে পারি যে ব্রাউজারগুলি বাইরে থেকে ব্লকের প্রস্থগুলি (মূল থেকে টিপস) গণনা করে তার উচ্চতা নির্ধারণ করার জন্য (মূলের টিপস) সামগ্রীগুলি সেই ব্লকগুলিতে প্রবাহিত করে।

— সাম

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

— u353

যে নির্ভরতা একটি বীজগাণিতিক সূত্র একটি সমাধান এবং যা শেষ হবে না না একটি অসীম লুপ এর ফলে যদি না আপনি একটি উপায় যে এই সম্মান করে না তার সমাধানের চয়ন। বলুন পিতামাতার উচ্চতা h_p। 10% এর একটি প্যাডিং শীর্ষস্থানটি শিশুর উচ্চতা তৈরি করবে h_c = h_ci + 0.1h_p, যেখানে সন্তানের h_ciঅভ্যন্তরীণ উচ্চতা এবং পিতামাতার উচ্চতার উপর নির্ভর করে না। একটি সন্তানের জন্য আপনি সমীকরণ h_p = h_ci + 0.1h_p=> সমীকরণ থেকে পিতামাতার উচ্চতাটি সন্ধান করুন h_p = h_ci / 0.9। এমনকি আপনার আলাদা আলাদা প্যাডিংয়ের জন্য আপনার যত শিশু রয়েছে তা আপনি সর্বদা এটি করতে পারেন। এটির একটি মাত্র অজানা ( h_p) এবং একটি সমীকরণ।

— জেটিয়ন

আমি মনে করি না যে অসীম গণনা এর কারণ। একটি সাধারণ কারণ হ'ল: widthঅনুভূমিকভাবে একই সমস্যার ফলাফল ব্যবহার করা ।

— জয়

Answer 2

"এন%" মার্জিন (এবং প্যাডিং) হওয়ার জন্য একই জন্য মার্জিন টপ / মার্জিন ডান / মার্জিন-নীচে / মার্জিন-বাম, চারটি একই বেস আপেক্ষিক হতে হবে। যদি উপরে / নীচে বাম / ডান 'এর চেয়ে আলাদা বেস ব্যবহার করা হয়, তবে "এন%" মার্জিন (এবং প্যাডিং) চারটি পার্শ্বে একই জিনিসটি বোঝায় না।

(এছাড়াও নোট করুন প্রস্থের তুলনায় শীর্ষ / নীচের মার্জিন থাকা একটি অদ্ভুত সিএসএস হ্যাক সক্ষম করে যা আপনাকে অপরিবর্তনীয় দিক অনুপাত সহ একটি বক্স নির্দিষ্ট করতে দেয় ... এমনকি বাক্সটি পুনরুদ্ধার করা হলেও।)

Comments

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

— দুদেওয়াদ

আমি অনুমান করি যে সিনট্যাক্সে একটি অতিরিক্ত উপাদান থাকা ভাল লাগবে যাতে আপনি বলতে পারেন padding: n [type]। সুতরাং আপনার পিছনে সামঞ্জস্যের জন্য দ্বিতীয় প্যারামিটারটিকে "প্রস্থ" এ ডিফল্ট করার padding: 5% logicalবিপরীতে আপনার কাছে (ওপি কী প্রস্তাব দেয়) থাকতে পারে padding: 5% width।

— জেটিয়ন

"এন% মার্জিন (এবং প্যাডিং) চারপাশে একই জিনিস বোঝায় না" - তবে কেন এটি সমস্যা হবে?

— হারবার্টস

Answer 3

আমি এই জেএসফিডাল (ক্রোম 46.0.2490.86 তে) খেলে এবং এই পোস্টটি (চীনা ভাষায় লিখিত ) উল্লেখ করার পরে @ চককোলার্সের উত্তরের পক্ষে ভোট দিয়েছি ।

---

অসীম গণনা অনুমানের বিরুদ্ধে একটি বড় কারণ হ'ল: widthএকই অনন্ত গণনা সমস্যার মুখোমুখি হওয়া ।

এই জেএসফিডেলটি দেখুন , parentপ্রদর্শনটিটি inline-blockযা এতে মার্জিন / প্যাডিং সংজ্ঞায়িত করতে উপযুক্ত। childমার্জিন মূল্য আছে 20%। আমরা যদি অসীম গণনা অনুমান অনুসরণ করি :

1. childউপর নির্ভর করে প্রস্থparent
2. parentউপর নির্ভর করে প্রস্থchild

তবে ফলস্বরূপ, ক্রোম কোথাও গণনা বন্ধ করে দেয়, ফলস্বরূপ:

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

সুতরাং আমরা দেখতে পাচ্ছি: অসীম গণনা রোধ করার কিছু উপায় রয়েছে ।

---

আমি অনুমানের সাথে একমত যে: এই নকশাটি কেবলমাত্র চারটি মার্জিন / প্যাডিং মান একই পরিমাপের উপর ভিত্তি করে রাখার জন্য।

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

Comments

এটি কারণ যে ওয়েব পৃষ্ঠাগুলি একটি সাধারণ অসীম দিকে লম্বালম্বিভাবে স্ক্রোল করে; সুতরাং প্রস্থটি ব্রাউজার উইন্ডোর প্রস্থ থেকে গণনা করা যায়। যদি আপনি তাদের প্রস্থকে আরও বৃহত্তর হিসাবে নির্দিষ্ট করেন তবে স্ক্রিনের চেয়ে উপাদানগুলি কেবলমাত্র বৃহত্তর। সাধারণ ব্লক উপাদানগুলি 100% প্রস্থের হয় এবং উল্লম্ব দিকটিতে স্বয়ংক্রিয়ভাবে প্রসারিত হয় (অজানা)। সে কারণেই প্রস্থে একই সমস্যা নেই।

— লুসেন্ট ফক্স

Answer 4

আমি বুঝতে পেরেছি যে ওএস জিজ্ঞাসা করছে যে সিএসএস স্পেসিফিকেশন শীর্ষ / নীচের মার্জিন শতাংশকে প্রস্থের% (যেমন না, ধরে নেওয়া হবে, উচ্চতা) হিসাবে সংজ্ঞা দেয় তবে আমি ভেবেছিলাম যে এটি কোনও সম্ভাব্য সমাধান পোস্ট করার ক্ষেত্রেও কার্যকর হতে পারে।

বেশিরভাগ আধুনিক ব্রাউজারগুলি এখন vw এবং vh ​​সমর্থন করে যা আপনাকে ভিউপোর্টের প্রস্থ এবং ভিউপোর্টের উচ্চতার বিপরীতে মার্জিন সংখ্যা নির্দিষ্ট করতে দেয় numbers

100vw / 100vh সমান 100% প্রস্থ / 100% উচ্চতা (যথাক্রমে) যদি কোনও স্ক্রোলবার না থাকে; যদি কোনও স্ক্রোলবার থাকে তবে ভিউপোর্ট নম্বরগুলি এর জন্য অ্যাকাউন্ট করে না (যখন% সংখ্যাগুলি করেন)। ধন্যবাদ, প্রায় সমস্ত ব্রাউজারগুলি 17px আকারের স্ক্রোলবার ব্যবহার করে ( এখানে দেখুন ), যাতে আপনি এটির জন্য অ্যাকাউন্টে সিএসএস ক্যালক ফাংশন ব্যবহার করতে পারেন। যদি আপনি না জানেন যে কোনও স্ক্রোলবার প্রদর্শিত হবে কি না, তবে এই সমাধানটি কার্যকর হবে না।

উদাহরণস্বরূপ: অনুভূমিক স্ক্রোলবারকে ধরে না রেখে, উচ্চতার 50% শীর্ষের মার্জিনটিকে "মার্জিন-শীর্ষ: 50vh;" হিসাবে সংজ্ঞায়িত করা যায়। অনুভূমিক স্ক্রোলবারের সাহায্যে এটিকে "মার্জিন-টপ: ক্যালক (0.5 * (100vh - 17px)) হিসাবে সংজ্ঞায়িত করা যেতে পারে;" (মনে রাখবেন যে গণনায় বিয়োগ এবং প্লাস অপারেটরগুলির উভয় পক্ষেই ফাঁকা স্থান প্রয়োজন!)।

Comments

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

— জুলে