সিএসএস কেন নেতিবাচক প্যাডিং সমর্থন করে না?

Question

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

আপডেট

যেমন আমি দেখছি, উদাহরণস্বরূপ, আপনি যদি এমন কোনও ফন্ট ব্যবহার করছেন যা বলুন, উল্লম্ব ফাঁকের একটি 20px, এবং আপনি ফন্টের নীচে একটি ড্যাশযুক্ত সীমানা প্রয়োগ করতে চান, যখন হাইপারলিঙ্ক উপস্থিত হবে তখন বলুন। এরকম ক্ষেত্রে আপনি স্টাইলটি খুব ন্যাংটো হয়ে উঠবেন, কারণ ড্যাশড বর্ডারটি নির্দিষ্ট শব্দের নীচে 20px প্রদর্শিত হবে। আপনি যদি নেতিবাচক মার্জিন ব্যবহার করেন তবে এটি কার্যকর হবে না, কারণ মার্জিন সীমানার বাইরের অঞ্চলটিকে পরিবর্তন করে। নেতিবাচক প্যাডিং এ জাতীয় পরিস্থিতিতে সহায়তা করতে পারে।

Comments

কারণ এটি নেতিবাচক প্যাডিংয়ের কোনও অর্থ নেই

— পেটাহ

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

— লিনাস ক্লিন

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

— বানাচ্ছেন

যদি কারও কাছে কিছু বোঝার অর্থ হয় না, তবে তাদের অন্য কারও পথে যাওয়ার কোনও অজুহাত নেই।

— রোল্ফ

আমি একটি <span>ট্যাগে কোড প্রদর্শন করার চেষ্টা করছি এবং কোডটি ব্লক করার শুরুতে যেভাবে এটি অতিরিক্ত পংক্তি ছুঁড়েছে তা ছুঁড়ে ফেলা হচ্ছে। নেতিবাচক প্যাডিং সহ, আমি এই অতিরিক্ত স্থানটি সরিয়ে দিতে পারি।

— স্টিভেন লু

Answer 1

আমি সম্প্রতি একটি অন্য প্রশ্নের উত্তর দিয়েছিলাম যেখানে আমি আলোচনা করেছি যে কেন বক্স মডেলটি এরকম।

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

Comments

ধন্যবাদ কুঁড়ি এটি আমাকে একটি সন্তোষজনক কারণ দেয়। চিয়ার্স। :)

— ikartik90

আপনি যদি পাঠ্যের নিকটে সীমানাটি সঙ্কুচিত করতে চান তবে উদাহরণস্বরূপ যখন আপনি সীমানা চিত্র ব্যবহার করছেন।

— হিমাটরস

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

— রল্ফ

হ্যাঁ, এটি একটি কারণ, তবে আমি এটিকে সন্তোষজনক বলব না। এটি এমন একটি ক্ষেত্রে যেখানে আমার পৃষ্ঠাটি কীভাবে সংজ্ঞায়িত করতে হয় এবং কীভাবে আমার পৃষ্ঠাটি সংজ্ঞায়িত করা উচিত তা আমাকে বলতে শুরু করে spec আমি যদি আমার বিষয়বস্তুটি আমার পটভূমির প্রান্তগুলি, সীমানা এবং / অথবা মার্জিনগুলিকে ওভারল্যাপ করতে চাই, তবে তা আমার পূর্বানুক্রমিক হওয়া উচিত, কেন আমি তা সত্ত্বেও তা করতে চাই তার সুনির্দিষ্ট নির্ধারকদের কল্পনা। দুঃখিত, আমি একটু বিরক্ত হয়েছি যে পাঠ্য উচ্চতার চেয়ে ছোট এবং উল্লম্বভাবে কেন্দ্রীভূত একটি নির্দিষ্ট আকারের বিভাজক পেতে আমাকে সিনট্যাকটিকাল ক্রাফ্ট বা আরও খারাপ, একক পিক্সেল প্রশস্ত একক রঙের চিত্র যুক্ত করতে হবে।

— জেসন

@zzzzBov, আমি অনুভব করেছি যে আমি কেন এমন কাজ করতে চাইব তার জন্য শেষ পর্যন্ত যে উদাহরণ দিয়েছিলাম তার কারণে এটি প্রাসঙ্গিক, যা এই পৃষ্ঠার মন্তব্যে একটি সাধারণ প্রশ্ন। স্বীকার করা যে, আমার ঘোড়াটি কিছুটা উপরে ছিল leading

— জেসন

Answer 2

সংজ্ঞা অনুসারে প্যাডিং একটি ধনাত্মক পূর্ণসংখ্যা (0 সহ)।

নেতিবাচক প্যাডিংয়ের ফলে সীমানাটি সামগ্রীতে পড়ে যাবে ( ডাব্লু 3 - তে বক্স-মডেল পৃষ্ঠাটি দেখুন) - এটি সামগ্রীর ক্ষেত্রটিকে সামগ্রীর চেয়ে ছোট করে দেবে, যা বোঝা যায় না।

Comments

বিষয়বস্তুতে সীমানাটি ভেঙে ফেলা হুবহু ওয়ান্টেড এফেক্ট। আপনি এই প্রভাবটি অর্জনের অন্য কোনও উপায় সম্পর্কে জানেন?

— রল্ফ

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

— ইয়েতি

Answer 3

কেন negative paddingদরকারী এবং দুর্দান্ত হতে পারে তার একটি খুব ভাল উদাহরণ বর্ণনা করতে চাই ।

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

নিম্নলিখিত HTML টি পর্যালোচনা করুন:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

নিম্নলিখিত সিএসএসের সাহায্যে আমরা divবাইরের ভিতরে অভ্যন্তরের সামগ্রীটি উল্লম্বভাবে কেন্দ্র করতে সক্ষম হব div:

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

আমাকে ব্যাখ্যা করার অনুমতি দিন ...

সম্পূর্ণরূপে অভ্যন্তরীণ ডিভের শীর্ষটিকে 50% এ অবস্থানটি বাইরের ডিভের কেন্দ্রে অভ্যন্তরীণ ডিভের শীর্ষ প্রান্তটি স্থাপন করে। বেশ সহজ. এটি কারণ শতাংশ ভিত্তিক অবস্থান প্যারেন্ট উপাদানটির অভ্যন্তরীণ মাত্রাগুলির সাথে তুলনামূলক ।

অন্যদিকে শতাংশ শতাংশ ভিত্তিক প্যাডিং লক্ষ্যবস্তু উপাদানটির অভ্যন্তরীণ মাত্রার উপর ভিত্তি করে । সুতরাং, padding-top: -50%;আমরা সম্পত্তি প্রয়োগ করে আমরা অভ্যন্তরীণ ডিভের বিষয়বস্তুর উচ্চতার 50% দূরত্বে অভ্যন্তরীণ ডিভের সামগ্রীটি উপরের দিকে স্থানান্তরিত করেছি, সুতরাং বাইরের ডিভের অভ্যন্তরের অভ্যন্তরের ডিভের সামগ্রীটি কেন্দ্রীভূত করে এখনও উচ্চতার মাত্রাটির অনুমতি দিচ্ছি অভ্যন্তরীণ ডিভিকে গতিশীল হতে হবে!

আপনি যদি আমাকে ওপি জিজ্ঞাসা করেন, এটি সর্বোত্তম ব্যবহারের কেস হবে এবং আমি মনে করি এটি কার্যকর করা উচিত তাই আমি এই হ্যাকটি করতে পারি। হাঃ হাঃ হাঃ. অথবা, তাদের কেবলমাত্র কার্যকারিতা ঠিক করতে হবে vertical-alignএবং আমাদের vertical-alignসমস্ত উপাদানগুলিতে কাজ করে এমন একটি সংস্করণ আমাদের দেওয়া উচিত ।

Comments

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

— সার্জিও

2018-তে কেন্দ্রীভূত করা ঠিক যেমন উপযুক্ত সামগ্রী এবং প্রান্তিককরণ-আইটেমগুলির সাথে ডিসপ্লে ফ্লেক্স ব্যবহার করা ঠিক ততটাই সহজ ... নিখুঁত কেন্দ্রিক ডিভ থাকতে কোডের 3 লাইন।

— কায়সার

Answer 4

এটি উপায় দ্বারা সাহায্য করতে পারে:

বক্স নির্ধারন সিএসএস সম্পত্তি ডিফল্ট সিএসএস বক্স ক্যালকুলেট প্রস্থ এবং উপাদানের উচ্চতা ব্যবহৃত মডেল পরিবর্তন করতে ব্যবহৃত হয়।

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

Answer 5

আপনি কেন জিজ্ঞাসা করেছিলেন, কীভাবে এটি প্রতারণা করবেন না:

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

যখন এইচটিএমএল ডিজাইন করা হয়েছিল, পত্রিকাগুলি তখনকার চিত্রগুলির চারপাশে পুনরায় সাজানো টেক্সট পছন্দ করত, এখন ঘৃণা করা হয়েছে কারণ আজ আমাদের স্পর্শের প্রবণতা রয়েছে এবং প্রচুর জায়গা এবং পড়ার মতো কিছুই নেই এমন স্কোয়ার আইটেমগুলিকে পছন্দ করে। সে কারণেই তারা কেন্দ্রীকরণের চেয়ে ভাসমানদের উপরে আরও চাপ সৃষ্টি করেছে, বা তারা এমন কিছু নকশা করতে পারে margin-top: fill;বা margin: average 0;কেবল নীচের অংশে প্রান্তিককরণ করতে বা এর চারপাশের অতিরিক্ত স্থান বিতরণ করতে পারে।

এই ক্ষেত্রে আমি মনে করি এটি একই কারণে সিএসএসকে :parentসিউডো-সিলেক্টরের অভাবের কারণেই কার্যকর করা হয়নি : লুপিং মূল্যায়নগুলি রোধ করতে।

ইঞ্জিনিয়ার না হয়ে, আমি দেখতে পাচ্ছি যে এই মুহূর্তে সিএসএস উপাদানগুলি একবার আঁকার জন্য তৈরি হয়েছিল, ভবিষ্যতের উপাদানগুলি আঁকার জন্য কিছু বৈশিষ্ট্য মনে রাখবেন, তবে ইতিমধ্যে আঁকা উপাদানগুলিতে কখনও ফিরে যেতে পারেন না।

এই কারণেই (আমার ধারণা) প্যাডিংটি প্রস্থে গণনা করা হয়, কারণ এটি আঁকা শুরু করার সময় যে মানটি পাওয়া যায়।

প্যাডিংয়ের জন্য যদি আপনার নেতিবাচক মান থাকে তবে এটি বাহ্যিক সীমাতে প্রভাব ফেলবে, যা মার্জিনটি ইতিমধ্যে সেট করা থাকলে আগেই সংজ্ঞায়িত করা হয়। আমি জানি, এখনও কিছুই আঁকা হয়নি, তবে আপনি যখন পড়েন যে চিত্রাঙ্কন প্রক্রিয়াটি কীভাবে 90 এর প্রযুক্তির মাধ্যমে প্রতিভা দ্বারা তৈরি করা হয়েছে, তখন আমার মনে হয় আমি বোবা প্রশ্ন জিজ্ঞাসা করছি এবং কেবল "ধন্যবাদ" হি বলি।

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

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

সুতরাং চিত্রাঙ্কন এবং এগিয়ে গণনা করা এবং একবার আঁকানো উপাদান সম্পর্কে ভুলে যাওয়া, আপাতত এটি একটি আবশ্যক বলে মনে হচ্ছে।

Answer 6

কনটেইনারগুলির ভিতরে একটি আইফ্রেম লাগানো ধারকটির আকারের সাথে মেলে না। এটি প্রায় 20px প্যাডিং যুক্ত করে। বর্তমানে এটি ঠিক করার কোনও সহজ উপায় নেই। আপনার জাভাস্ক্রিপ্ট দরকার ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

নেতিবাচক মার্জিনগুলি একটি সহজ সমাধান হবে।

Answer 7

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

হ্যাঁ, এটি 2019 সালে CSS3 এর সাথে এখনও প্রাসঙ্গিক; ক্ষেত্রে পয়েন্ট: ফ্লেক্সবক্স লেআউট। ফ্লেক্সবক্স আইটেমগুলির মার্জিনটি ধসে পড়ে না, সুতরাং এগুলি সমানভাবে স্থান এবং পাত্রে ভিজ্যুয়াল প্রান্তের সাথে সারিবদ্ধ করার জন্য , অবশ্যই তাদের ধারকের প্যাডিং থেকে আইটেমের মার্জিন বিয়োগ করতে হবে। যদি কোনও ফলাফল <0 হয় তবে আপনাকে অবশ্যই ধারকটিতে নেতিবাচক মার্জিন ব্যবহার করতে হবে বা বিদ্যমান মার্জিনের সাথে যোগফলটি যোগ করতে হবে। উদাহরণস্বরূপ, উপাদানটির সামগ্রীর প্রভাব কীভাবে এটির জন্য মার্জিনকে কীভাবে সংজ্ঞায়িত করে, যা পিছনের দিকে। সামঞ্জস্য পরিষ্কারভাবে কাজ করে না যখন ফ্লেক্স উপাদানগুলির সামগ্রীতে মার্জিনগুলি বিভিন্ন ইউনিটে সংজ্ঞায়িত করা হয় বা কোনও ভিন্ন ফন্টের আকার দ্বারা প্রভাবিত হয় ইত্যাদি Sum

নীচের উদাহরণে আদর্শভাবে একত্রিত হওয়া এবং সমানভাবে ধূসর বাক্সগুলি রাখা উচিত তবে দুঃখজনকভাবে তারা তা নয়।

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}

<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

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