প্যারেন্ট প্যাডিং উপেক্ষা করুন

Question

আমি প্যারেন্ট প্যাডিং উপেক্ষা করার জন্য আমার অনুভূমিক নিয়মটি পাওয়ার চেষ্টা করছি।

আমার কাছে যা আছে তার একটি সাধারণ উদাহরণ এখানে:

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

আপনি দেখতে পাবেন যে অনুভূমিক বিধি 10px দ্বারা পিতামাতার বাইরে প্রসারিত। আমি প্যাডিং উপেক্ষা করার জন্য এটি চেষ্টা করার চেষ্টা করছি যা পিতামাতার ডিভের সমস্ত কিছুর প্রয়োজন।

আমি সচেতন যে আমি অন্য সমস্ত কিছুর জন্য পৃথক ডিভ তৈরি করতে পারি; এই সমাধানটি আমি খুঁজছি না।

Answer 1

সহজ ফিক্স, ঠিক আছে

margin:-10px

ঘন্টা

Comments

এটি কাজ করে, তবে সমস্যাটি হ'ল এটি পিতামাতার বিভাজনের সম্পূর্ণ দৈর্ঘ্য প্রসারিত করবে না। এটি কারণ প্যাডিংটি 100px প্রস্থের অন্তর্ভুক্ত নয়, এর অর্থ এটি আসলে 120px প্রশস্ত এবং আপনার <hr>ডিভের শেষ থেকে 20px হবে। আমি যা বলতে চাইছি তার জন্য এই জেএসফিডেলটি দেখুন: jsfiddle.net/YVrWy/1

— অ্যালাস্টার পিটস

হ্যাঁ আমি এটি যুক্ত করার পরে এটি কাজ করেছিলাম; প্রস্থ অপ্রাসঙ্গিক।

— স্যাম

আপনার যদি 100% প্রস্থের প্রয়োজন হয় তবে প্রস্থের বৈশিষ্ট্য হিসাবে অটো ব্যবহার করুন। প্রদত্ত মার্জিনের সাথে সম্মানের সাথে প্রস্থ গণনা করা হবে।

— schlingel

আপনার মতো কিছু করা উচিত ... মার্জিন: 0 -15px; ..... অন্যথায় ঘন্টাটি উল্লম্বভাবে এর সংলগ্ন সামগ্রীকে স্তন্যপান করবে।

— হনকসিলিট

কান্ডা হ্যাকিশ আশা করি এর থেকে আরও ভাল উপায়

— হত

Answer 2

চিত্রের উদ্দেশ্যে আপনি এ জাতীয় কিছু করতে পারেন

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

Comments

তবে আপনি যদি পিতামাতার প্যাডিং অগত্যা না জানেন?

আমি যখন প্রস্থের পরিবর্তে ন্যূনতম প্রস্থ ব্যবহার করি তখন এটি আমার জন্য কাজ করে।

— পেড্রো নাদোলনি

@ user5707327 আপনি সবসময় পিতামাতার প্যাডিং পেতে জাভাস্ক্রিপ্টের সাথে শৈলীগুলি একত্রিত করতে পারেন

— adriancho5692

বাহ, নেতিবাচক প্রস্থের প্রতিভা ব্যবহার!

— মিঃ পিজ্জাগুই

Answer 3

বড় আকারে এই প্রশ্নের উত্তর দেওয়া হয়েছে তবে প্রত্যেকেই ছোট্ট অংশে। আমি ঠিক এক মিনিট আগে এটি মোকাবেলা করেছি।

আমি একটি প্যানেলের নীচে একটি বোতাম ট্রে রাখতে চেয়েছিলাম যেখানে প্যানেলের চারপাশে 30px রয়েছে। বোতামের ট্রেটি নীচে এবং পাশের ফ্লাশ হতে হয়েছিল।

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

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

Answer 4

কিন্ডা দেরীতে। তবে এটি গণিতের কিছুটা সময় নেয়।

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

আমার উইন্ডোজ নেই তাই আমি IE তে এটি পরীক্ষা করিনি।

ফিডল: বেড়াল উদাহরণ ..

Comments

আপনার প্যাডিং-ডানদিকে 60px প্যাডিং-বামে: 30px; প্যাডিং-ডান: 30px বিভক্ত করা উচিত, যাতে আপনি পাঠ্য-সারিবদ্ধ: কেন্দ্র ব্যবহার করার সময় সামগ্রীটি অফসেট না হয়;

— লুক

Answer 5

margin: 0 -10px; 

বেশী ভালো

margin: -10px;

পরবর্তীকালে এটিতে উল্লম্বভাবে সামগ্রীতে স্তন্যপান করা হয়।

Answer 6

আপনার পিতা বা মাতা 120px প্রশস্ত - এটি প্রতিটি প্রান্তে 100 প্রস্থ + 20 প্যাডিং যাতে আপনার লাইনটি 120px প্রশস্ত করতে হবে। এখানে কোড। পরের বার নোট করুন যে প্যাডিং উপাদান প্রস্থে যোগ করে।

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

Comments

সংজ্ঞায়িত প্রস্থ সঙ্গে সহজ। সমস্যাটি যখন আপনি প্রস্থ জানেন না

— গিলহেরেম

@GuilhermeFerreira ব্যবহারের width: auto;মধ্যে hr। jsfiddle.net/ToolmakerSteve/7p85dsrq/3 দুর্ভাগ্যক্রমে, এই সমাধানটির এখনও paddingপিতামাতার দ্বারা সেট করা জেনে রাখা দরকার ।

— টুলমেকারস্টেভ

Answer 7

আপনি কোন বক্স মডেলটি ব্যবহার করছেন তাতে সমস্যাটি নেমে আসতে পারে। আপনি কি আইই ব্যবহার করছেন?

আইই যখন কুইর্কস মোডে থাকে, widthএটি আপনার বাক্সের বাইরের প্রস্থ, যার অর্থ প্যাডিংটি ভিতরে থাকবে। সুতরাং বাক্সের অভ্যন্তরে থাকা মোট অঞ্চলটি 100px - 2 * 10px = 80pxএমন ক্ষেত্রে আপনার 100px প্রশস্তটি <hr>সঠিক দেখাবে না।

আপনি যদি স্ট্যান্ডার্ড মোডে থাকেন তবে এটি কি widthআপনার বাক্সের অভ্যন্তর প্রস্থ হবে এবং বাইরে প্যাডিং যুক্ত করা হবে। সুতরাং বাক্সের মোট প্রস্থ আপনার জন্য বাক্সের 100px + 2 * 10px = 120pxঠিক 100px ছাড়ছে <hr>।

এটি সমাধানের জন্য, হয় IE এর জন্য আপনার সিএসএস মানগুলি সামঞ্জস্য করুন। (সেখানে ঠিক আছে কিনা তা দেখতে ফায়ারফক্সে চেক করুন)। বা আরও ভাল, কড়া মোডে ব্রাউজারটিকে লাথি মারার জন্য একটি দস্তাবেজের প্রকার সেট করুন - যেখানে আইই স্ট্যান্ডার্ড বক্স মডেলটি অনুসরণ করে।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

Answer 8

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

margin-top: -100px;
margin-bottom: -100px;

আসল মানটি খুব বেশি গুরুত্ব পায় না। অনুভূমিক প্যাডিংয়ের জন্য এটি চেষ্টা করে নি।

Answer 9

সহজ ফিক্স .. পিতামাতার ডিভ যোগ করুন:

বক্স-সাইজিং: বর্ডার-বক্স;

Answer 10

এটি করার আরেকটি উপায় এখানে।

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

এখানে repl.it- এর কয়েকটি উদাহরণ রয়েছে: https://repl.it/@bryku/LightgrayBleakIntercept