পিতামাতার প্যাডিং উপেক্ষা করে নিখুঁত অবস্থান

173

আপনি কীভাবে চূড়ান্ত অবস্থানযুক্ত উপাদানটিকে তার পিতামাতার প্যাডিংয়ের সম্মান করবেন? আমি তার পিতামাতার প্রস্থ জুড়ে প্রসারিত করতে এবং মূলত পাদদেশের পিতামাতার নীচে অবস্থিত হতে চাই। তবে সন্তানের পিতামাতার প্যাডিংয়ের সম্মান করতে হবে এবং এটি তা করছে না। সন্তানের পিতামাতার প্রান্তের বিপরীতে ঠিক চেপে দেওয়া হয়।

সুতরাং আমি এটি চাই:

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

তবে আমি এটি পাচ্ছি:

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

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

আমি এটি অভ্যন্তরীণ ডিভের চারপাশে একটি মার্জিনের সাথে ঘটতে পারি, তবে আমি এটি যুক্ত করতে চাই না।

css padding css-position

— d512
সূত্র

5

অভ্যন্তরীণ ডিভের বাম / ডান / নীচে পরিবর্তন করবেন না কেন style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?

— j08691

12

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

— d512

উপরে উল্লিখিত হিসাবে, আপনি যদি (আত্মীয়-অবস্থানযুক্ত) পিতা-মাতার প্যাডিংয়ের মান left:এবং right:(পরম-অবস্থানযুক্ত) সন্তানের হিসাবে ব্যবহার করেন তবে আপনার সমস্যাটির সমাধান হবে। আমি এই খ / সি যুক্ত করছি যে উত্তরটি একই সমস্যাযুক্ত অন্যরা খুঁজছেন সম্ভবত।

— rda3000

এখানে একটি অনুরূপ সমস্যা রয়েছে: jsfiddle.net/5n4By/6 । পাদচরণটি তার পিতামাতার বাম প্যাডিংয়ের সম্মান করছে, তবে এটি ডানদিকে উপচে পড়েছে। আপনি আশা করতে পারেন যে এটি সঠিক প্যাডিংয়ের পাশাপাশি সম্মানের সাথে

— সম্মতি রাখবে

186

প্রথমে দেখা যাক কেন এটি হচ্ছে।

কারণটি হ'ল, আশ্চর্যজনকভাবে, যখন কোনও বাক্সে এটি থাকে position: absoluteতার পিতামাতার প্যাডিং বাক্স থাকে (এটি, তার প্যাডিংয়ের চারপাশের বাক্স)। এটি আশ্চর্যজনক কারণ সাধারণত (এটি স্থির বা আপেক্ষিক অবস্থানের ব্যবহার করার সময়) ধারণকৃত বাক্সটি পিতামাতার সামগ্রী বাক্স।

সিএসএসের নির্দিষ্টকরণের সম্পর্কিত অংশটি এখানে :

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

সবচেয়ে সহজ পদ্ধতির - যেমন শীতের উত্তর হিসাবে প্রস্তাবিত padding: inheritthe একেবারে অবস্থিত ব্যবহার করা div। এটি কেবলমাত্র কাজ করে, যদি আপনি না চান তবে একেবারে divনিজস্ব কোনও অতিরিক্ত প্যাডিং থাকতে হবে। আমি মনে করি সর্বাধিক সাধারণ-উদ্দেশ্য সমাধানগুলি (এতে উভয় উপাদানগুলির নিজস্ব স্বতন্ত্র প্যাডিং থাকতে পারে):

divএকেবারে অবস্থানের চারপাশে একটি অতিরিক্ত তুলনামূলকভাবে পডিং (কোনও প্যাডিং ছাড়াই) যুক্ত করুন div। যে নতুন divতার পিতা বা মাতা এর প্যাডিং সম্মান করবে, এবং এটি পরিপূর্ণভাবে পজিশন divতারপর তা পূরণ হবে না।

খারাপ দিকটি অবশ্যই হ'ল আপনি কেবলমাত্র উপস্থাপিত উদ্দেশ্যে এইচটিএমএল এর সাথে জগাখিচুড়ি করছেন।
একেবারে অবস্থানকৃত উপাদানটিতে প্যাডিং (বা এতে যুক্ত) পুনরাবৃত্তি করুন।

এখানে নেতিবাচকতাটি হ'ল আপনাকে আপনার সিএসএসের মানগুলি পুনরাবৃত্তি করতে হবে, যা আপনি সিএসএস সরাসরি লিখছেন তা ভঙ্গুর। তবে আপনি যদি প্রাক প্রসেসিংয়ের মতো সরঞ্জামটি ব্যবহার করেন SASSবা LESSআপনি কোনও ভেরিয়েবল ব্যবহার করে সমস্যাটি এড়াতে পারেন। এই পদ্ধতিটি আমি ব্যক্তিগতভাবে ব্যবহার করি।

— কেভিন ক্রিস্টোফার হেনরি
সূত্র

কেন এটি ডিফল্ট position: absolute? এতে অবাক হওয়ার কিছু যে ধারণকারী বক্স প্যাডিং বক্স, কিন্তু এটা জন্য একটি কারণ সেখানে নিশ্চয়ই আমি নিশ্চিত একটি কারণ কেন (ছাড়া হয় ঠিক box-sizing) width& heightপ্যাডিং বা সীমান্ত অন্তর্ভুক্ত করবেন না।

— ট্রাইসিস

1

কেবলমাত্র একটি সংযোজন: এর কোনওটিই box-sizingপিতামাতা বা সন্তানের দ্বারা সম্পত্তি দ্বারা প্রভাবিত হবে না। এটি কারণ প্রস্থ / উচ্চতা হিসাবে আকার পরিবর্তন করে , তবে এতে থাকা বাক্সটি নয়, যদিও আমি স্বীকার করি এটি যদি উভয়কেই প্রভাবিত করে তবে এটি আরও অর্থপূর্ণ হবে।

— ট্রাইসিস

2

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

— নোতাগুরুএটল

1

@ নোতাগুরুএটল: padding: inheritপুরোপুরি অবস্থানের divনিজস্ব কোনও প্যাডিংয়ের প্রয়োজন না হলে ভাল কাজ করে এবং আমি সেই কৌশলটির একটি উল্লেখ যুক্ত করেছি। এটি কম নমনীয়, কারণ আপনি একেবারে অবস্থিত কোনও অতিরিক্ত প্যাডিং যুক্ত করতে পারবেন না div(যেমন আপনি বলতে পারবেন না padding: inherit + 5px)। সে কারণেই আমি এখানে যে কৌশলগুলি উল্লেখ করেছি তা আমি পছন্দ করি।

— কেভিন ক্রিস্টোফার হেনরি

1

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

— ডিলান পিয়ার্স

51

একটি জিনিস আপনি চেষ্টা করতে পারেন নিম্নলিখিত সিএসএস ব্যবহার করে:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

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

এছাড়াও, আমি box-sizing: border-box;জড়িত উপাদানগুলির জন্য ব্যবহার করছি ।

আমি এটি সমস্ত ব্রাউজারে পরীক্ষা করে দেখিনি, তবে মনে হয় এটি ক্রোম, ফায়ারফক্স এবং আই 10 তে কাজ করছে।

— শীতকালীন
সূত্র

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

— ওজিয়ার শেলভিস

তবে ওপি চায় না যে সন্তান পিতামাতার প্যাডিংয়ের উত্তরাধিকারী হোক। তিনি চান যে সন্তানের পিতামাতার প্যাডিং অনুসারে অফসেট হোক।

— মাইকেল গুমল্ট

30

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

— NewSpender
সূত্র

8

প্যারেন্ট ডিভিডে প্যাডিংয়ের পরিবর্তে মার্জিন ব্যবহার করুন: http://blog.vjeux.com/2012/css/css-absolve-position-taking-into-account-padding.html

— Niloct
সূত্র

সচেতন থাকুন যে পটভূমিতে প্যাডিংয়ের মতো পটভূমি (রঙ) মার্জিনগুলিতে প্রয়োগ হয় না

— পল

6

এটি এখানে আমার সেরা শট। আমি অন্য ডিভ যুক্ত করেছি এবং এটি লাল করে তুলেছি এবং এটি পরীক্ষার জন্য আপনার পিতামাতার উচ্চতা 200px এ পরিবর্তন করেছি। ধারণাটি হ'ল শিশুটি এখন নাতি-নাতনিতে পরিণত হয় এবং পিতামাতারা পিতামহ হন। সুতরাং পিতামাতা তার পিতামাতাকে শ্রদ্ধা করে। আশা করি আপনি আমার ধারণা পাবেন।

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

সম্পাদনা:

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

আমার সমাধান

আপনি যদি এটি পিতামাতার সম্মানের জন্য চান তবে একে একে একে একে ঠিক রাখবেন না।

— স্পর্শ
সূত্র

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

— d512

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

— স্পর্শ করুন

3

নিখুঁত অবস্থান পিতামাতার সম্মান দেয়, এটি হ'ল সমন্বয় ব্যবস্থা এটি ব্যবহার করে। আপনি যখন শীর্ষ 0 পিক্স বলছেন, তার অর্থ পিতামাতার শীর্ষ থেকে 0 পিক্সেট দূরে। প্রশ্নটি হল পিতামাতাদের প্যাডিং অ্যাকাউন্টে নেওয়া উচিত কিনা। যদি পিতামাতার 5px প্যাডিং থাকে এবং আপনি বাচ্চাকে শীর্ষ: -5 px দিয়ে থাকেন তবে এটি পিতামাতার প্যাডিং সম্মানিত হলে বা পিতামাতার উপরে 5px না থাকলে এটি পিতামাতার সাথে ফ্লাশ করে দেবে।

— d512

3

১) আপনি পিতামাতাকে বড় সীমানা ব্যবহার করতে পারবেন না - যদি আপনি একটি নির্দিষ্ট সীমানা রাখতে চান তবে

২) আপনি মার্জিন যুক্ত করতে পারবেন না - যদি আপনার পিতা-মাতা অন্য কোনও ধারকের অংশ হন এবং আপনি চান যে আপনার পিতামাতারা পুরো বিষয়টি গ্রহণ করুন যে পিতামাতার প্রস্থ।

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

তোমার ক্ষেত্রে:

.css-sux{
  padding: 0px 10px 10px 10px;
}

— bhavya_w
সূত্র

1

ডিভের একটি অতিরিক্ত স্তর ব্যবহার করে সহজেই করতে পারতেন।

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

ডেমো: https://jsfiddle.net/soxv3vr0/

— asankasri
সূত্র

0

যোগ তার অধিকার গ্রহণ কর প্যাডিং আপনার পরম অবস্থানে

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>

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

— ßãlãjî
সূত্র