সন্তানের উপাদানগুলিতে মার্জিন পিতামাতার উপাদানকে সরিয়ে দেয়

Question

আমার একটি div( পিতা বা মাতা ) রয়েছে যাতে আরও একটি div( শিশু ) রয়েছে। bodyকোনও নির্দিষ্ট সিএসএস শৈলীতে পিতামাতাই প্রথম উপাদান । আমি যখন সেট

.child
{
    margin-top: 10px;
}

শেষ ফলাফলটি হ'ল আমার সন্তানের শীর্ষটি এখনও পিতামাতার সাথে একত্রিত। বাচ্চাকে 10px নীচের দিকে স্থানান্তরিত করার পরিবর্তে, আমার পিতামাতারা 10px নীচে সরান।

আমার DOCTYPEসেট করা আছে XHTML Transitional।

আমি এখানে কি মিস করছি?

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

সম্পাদনা 2
এফএফ, আইই পাশাপাশি সিআর-তেও এই আচরণটি একই।

Comments

এই আচরণটি কখন কী বোঝায় না। মার্জিন মনে হয় পিতামাতার ভিতরে থাকতে পারে। পিতামাতাকে সরান না। কে এই নিয়ম লেখেন।

— মুহাম্মদ উমার

শেষ মন্তব্যের জন্য +2। গুরুত্ব সহকারে এই নিয়ম আমাকে বাগ। "যতবার সময় এটি কাজ করে তার 60%" - এটি মার্জিন।

— ক্যাসি ডোয়েন

আমি শেষ দুটি মন্তব্যকারীদের সাথে পুরোপুরি একমত। এই উন্মাদ হয়. মজার বিষয়টি হল পিতামাতার সাথে 1px সীমানা যুক্ত করা এটি সঠিকভাবে কাজ করে তোলে, তবে এর অর্থ আপনার সীমানা আছে ... যদি এটি প্রত্যাশিত আচরণ হয় তবে এটি হাস্যকর

— এরদোমিস্টার

এই সাহায্য করতে পারে আপনি :) stackoverflow.com/questions/35337043/...

— Bhojendra Rauniyar

এটি আমাকে ডিফল্ট বাক্স-আকার দেওয়ার নিয়মটির কথা মনে করিয়ে দেয়: " আমাদের একটি বাক্স শিপিং করা দরকার The বাক্সটি অবশ্যই 100 সেন্টিমিটারের চেয়ে বড় হওয়া উচিত না shipping " বাক্সটি 120 সেমি! " কি রসিকতা।

— নোলোনার

Answer 1

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

.parent { overflow: auto; }

বা:

.parent { overflow: hidden; }

এটি মার্জিনগুলি ভেঙে যেতে বাধা দেয় । সীমানা এবং প্যাডিং একই কাজ করে। সুতরাং, শীর্ষ-মার্জিনের পতন রোধ করতে আপনি নিম্নলিখিতগুলি ব্যবহার করতে পারেন:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

---

জনপ্রিয় অনুরোধ অনুসারে আপডেট করুন: সংঘাতের মার্জিনের পুরো পয়েন্টটি পাঠ্য সামগ্রীকে পরিচালনা করছে। উদাহরণ স্বরূপ:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

ব্রাউজারটি মার্জিনগুলি ভেঙে যাওয়ার কারণে পাঠ্যটি আপনি প্রত্যাশা মতো উপস্থিত হবেন এবং <div>মোড়ক ট্যাগগুলি মার্জিনগুলিকে প্রভাবিত করবে না। প্রতিটি উপাদান নিশ্চিত করে যে এটির চারপাশে ব্যবধান রয়েছে তবে ব্যবধান দ্বিগুণ হবে না। এর মার্জিনগুলি <h2>এবং যুক্ত <p>হবে না, তবে একে অপরের মধ্যে স্লাইড (তারা ধসে পড়ে)। একই উপাদান <p>এবং <ul>উপাদান জন্য ঘটে ।

দুঃখের বিষয়, আধুনিক ডিজাইনের সাহায্যে আপনি যখন ধারক স্পষ্টভাবে চান তখন এই ধারণা আপনাকে কামড় দিতে পারে। সিএসএস স্পোক এটিকে একটি নতুন ব্লক ফর্ম্যাটিং প্রসঙ্গে বলা হয়। overflowবা মার্জিন কৌতুক আপনি যে দেব।

Comments

আমি জানতে চাই কেন এটি কেন ঘটছে তা কারও পক্ষে ভাল। এই 'বৈশিষ্ট্য' বলতে কী পরিস্থিতি বোঝানো হয়েছিল।

— মুহাম্মদ উমার

@ মুহাম্মাদ উমর, পাঠ্যের বিষয়বস্তু নিয়ে এটি করা উচিত। উদাহরণস্বরূপ, একটি সিরিজ <h2>, <p>, <ul>অদ্ভুত ফাঁক বা "ডবল" মার্জিন এই ভাবে পাবেন না।

— vdboor

আপনি কিছু উদাহরণ দিতে পারে। ধরা যাক আমার ব্যাকগ্রাউন্ড হিসাবে ডিভ আছে। এতে এইচ 1, এইচ 2 এবং পি রয়েছে। এখন আমি h1 কে কিছুটা নীচে নিয়ে যেতে চাই যাতে এটি ব্যাকগ্রাউন্ড ডিভের উপরের প্রান্তের এত কাছাকাছি না, তবে এইচ 1 উপাদানটি নিজেই প্রসারিত করে না। আমি শীর্ষ মার্জিন যুক্ত মনে করি। যা সুস্পষ্ট। তবে যখন আমি এটি করি, গৌরবময় পটভূমি এটি সাথে নামার সিদ্ধান্ত নেয়। এটি কীভাবে একটি বৈশিষ্ট্য। কীভাবে এটি এইচ 1, এইচ 2 এবং পি এর মধ্যে ব্যবধান রাখতে সহায়তা করে। আপনি কী বলছেন তা দেখতে আমাকে সহায়তা করুন।

— মুহাম্মদ উমার

আমি আপনার জন্য একটি উদাহরণ যোগ করেছি

— vdboor

আমি আশা করি এটি আরও মার্জিনে যুক্ত হবে। মার্সিন্স ভেঙে যাওয়া আমার উন্নয়নজীবনের সবচেয়ে বিরক্তিকর বিষয় oy যদি আমি margin: 5px 10px;আইডি দিয়ে একে অপরের পাশে 2 ডিভ রাখি তবে উপরের থেকে 2 ডিভিড 5 পিক্সাল এবং তাদের মধ্যে 5 পিক্স নয় এবং তাদের মধ্যে 10 পিক্সের মধ্যে 20px হবে expect যদি আমি তাদের মধ্যে 10 পিক্সার আইডি নির্দিষ্ট করে দিতে চাইতাম margin: 5px 5px;। আমি সত্যই কামনা করি যে এমন একটি মূল নিয়ম আমি রাখতে পারি যা সমস্ত মার্জিন ভেঙে যাওয়া বন্ধ করে দেয়। আমি ঘৃণা করি যে আমাকে পর্দায় হ্যাকটি যা চান তা আসলে করার জন্য কাগজে মার্জিনের আকার দ্বিগুণ করতে হবে। এবং এই শীর্ষ জিনিস ... কি বিপর্যয়

— জেএল গ্রিফিন

Answer 2

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

আপনার যে আচরণটি চান তা পেতে, আপনার প্রয়োজন:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Comments

পিতামাতার সীমানা যুক্ত করা বাচ্চার .parent {border: solid 1px;}

— প্রান্তিকের উপরও

মার্জিন প্যাডিংয়ে যোগ করে না ... এটি আলাদাভাবে প্রযোজ্য। তবে ভিজ্যুয়াল এফেক্ট একই রকম।

— ব্রিলিয়ান্ড

আপনি যদি শীর্ষ-মার্জিন চান ...? আসলেই কোনও সমাধান নয়।

— ফিয়েল

যেমন ফীলা বলেছিল - যদি শীর্ষের মার্জিন প্রয়োজন হয় তবে এটি সত্যিই সমাধান নয়। vdboor এর উত্তর আরও ভাল মামলা।

— জোয়ে মুরানী

গুচ্ছ সমাধান রয়েছে, আপনার যথেষ্ট সৃজনশীল হতে হবে। চিয়ার্স। :-)

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

Answer 3

যদিও উত্তরগুলির সমস্তই সমস্যার সমাধান করে তবে তারা ট্রেড-অফস / অ্যাডজাস্টমেন্ট / সমঝোতা মত আসে

• floatsআপনি আছে উপাদানের ভাসা
• border-top, এটি পিতামাতাকে কমপক্ষে 1px নীচের দিকে ঠেলে দেয় যা তারপরে পিতামণ্ডলের -1pxউপাদানটিতে মার্জিন প্রবর্তনের সাথে সামঞ্জস্য করা উচিত । পিতামাতার ইতিমধ্যে margin-topআপেক্ষিক ইউনিট থাকাতে এটি সমস্যা তৈরি করতে পারে ।
• padding-top, ব্যবহার হিসাবে একই প্রভাব border-top
• overflow: hidden, যখন ড্রপ ডাউন মেনুর মতো পিতামাতার উপচে পড়া সামগ্রী প্রদর্শিত হবে তখন ব্যবহার করা যাবে না
• overflow: auto, প্যারেন্ট এলিমেন্টের জন্য স্ক্রোলবারগুলি উপস্থাপিত করে (ইচ্ছাকৃতভাবে) উপচে পড়া সামগ্রী (যেমন ছায়া বা সরঞ্জামের টিপের ত্রিভুজ)

সিএসএস 3 সিউডো উপাদানগুলি নীচে ব্যবহার করে সমস্যার সমাধান করা যেতে পারে

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

Comments

margin-top: -1pxঅপ্রয়োজনীয় বলে মনে হচ্ছে তবে আমি এটি পছন্দ করি।

— Flimm

আসলে, উভয় margin-top: -1pxএবং height: 0অপ্রয়োজনীয় বলে মনে হচ্ছে। ক্রোমে পরীক্ষিত। তবে সেরা সমাধান।

— নিনজাফার্ট

এই পদ্ধতিটি বেশিরভাগ ক্ষেত্রেই কাজ করে তবে ধারকটির মধ্যে শেষ উপাদানটির জন্য নীচের মার্জিনটিকে সম্মান করবে না। এটি উপচে পড়া সমান সংশোধন নয়: লুকানো; উদাহরণ স্বরূপ.

— মাইকেল জিওভান্নি পুমো

@ মিশেল জিওভান্নিপোমো উত্তরটি ব্যবহার করে সর্বশেষ উপাদানটির নীচের মার্জিনের সাথে কাজ করতে পরিবর্তন করা যেতে পারে.parent:after...

— এজাজ

আজকাল এটি অবশ্যই স্পষ্টভাবে সঠিক উত্তর। নির্বিঘ্নে কাজ করে (এটি আগে এবং এর আগে উভয়ই লাগিয়ে দেয়), আমি আশা করি লোকেরা অন্যগুলি দিয়েও স্ক্রোল করার সাহস করে!

— fgblomqvist

Answer 4

display:inline-blockশিশু উপাদান এ শৈলী যুক্ত করুন

Answer 5

পিতামাত্ত উপাদানটি খালি খালি  শিশু সন্তানের আগে রাখা উচিত নয় ।

Comments

হ্যাঁ, কখনও কখনও কেবল

— এটিই

Answer 6

এটিই আমার পক্ষে কাজ করেছিল

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Answer 7

আমি এটি খুঁজে পেয়েছি যে, আপনার .css এর অভ্যন্তরে> আপনি যদি কোনও ডিভ উপাদানটির প্রদর্শন সম্পত্তিটি ইনলাইন-ব্লকে সেট করে থাকেন তবে সমস্যাটি ঠিক হয়ে যায়। প্রত্যাশা অনুযায়ী মার্জিন কাজ করবে।

Answer 8

নিছক সিএসএস-সলিউশন

অনিচ্ছাকৃতভাবে চলমান ডিভের জন্য কন্টেন্টহীন প্রথম সন্তানের প্রিপেন্ড করতে নিম্নলিখিত কোডটি ব্যবহার করুন:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

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

সিউডো-উপাদানগুলির জন্য সমর্থন বিস্তৃত: ফায়ারফক্স 3+, সাফারি 3+, ক্রোম 3+, অপেরা 10+ এবং আই 8+। এটি যে কোনও আধুনিক ব্রাউজারে কাজ করবে (নতুনের সাথে সতর্ক থাকুন ::before, যা আইই 8 তে সমর্থিত নয়)।

প্রসঙ্গ

যদি কোনও উপাদানের প্রথম সন্তানের একটি থাকে margin-topতবে পিতামাতারা অনর্থক মার্জিনকে ভেঙে ফেলার উপায় হিসাবে তার অবস্থানটি সামঞ্জস্য করবে। কেন? এটা ঠিক এরকম।

নিম্নলিখিত সমস্যাটি দেওয়া:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

আপনি কোনও সাধারণ স্থানের মতো সামগ্রী সহ শিশুকে যুক্ত করে এটি ঠিক করতে পারেন। তবে আমরা সকলেই কেবল ডিজাইনের ইস্যুতে স্পেস যুক্ত করতে ঘৃণা করি। অতএব, white-spaceজাল সামগ্রীতে সম্পত্তিটি ব্যবহার করুন ।

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

যেখানে position: relative;ঠিক করার সঠিক অবস্থান নিশ্চিত করে। এবং white-space: pre;আপনাকে কোনও কন্টেন্ট - একটি সাদা জায়গার মতো - সংশোধন করতে হবে না makes এবং height: 0px;width: 0px;overflow: hidden;নিশ্চিত করে নিন যে আপনি কখনই সমাধানটি দেখতে পাবেন না।

আপনি যোগ করতে হবে পারে line-height: 0px;বা max-height: 0px;তা নিশ্চিত করার জন্য উচ্চতা আসলে শূন্য প্রাচীন ইন্টারনেট ব্রাউজার (আমি নিশ্চিত না আছি) রয়েছে। এবং allyচ্ছিকভাবে আপনি <!--dummy-->এটি পুরানো আই ব্রাউজারগুলিতে যুক্ত করতে পারেন, যদি এটি কাজ না করে।

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

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Comments

আপনি যদি হতাশ হন তবেই এই সমাধানটি ব্যবহার করুন এবং আপনি বিদ্যমান উপাদানগুলির জন্য কোনও কাস্টম সিএসএস সেট করতে পারবেন না - অন্যথায় আসল সমাধানটি ব্যবহার করুন: overflow: hidden;পিতামাতার জন্য সেট করুন।

— ইয়েতি

Answer 9

"ডিভ পিতামাতার" "ডিভ চাইল্ড" এর মার্জিন ব্যবহার রোধ করতে:
পিতামাতায় এই সিএসএস ব্যবহার করুন:

• ভাসা
• প্যাডিং
• সীমান্ত
• টলমলানি

Answer 10

এর marginমধ্যে থাকা উপাদানগুলির মধ্যে .childএকটি ভেঙে যাচ্ছে।

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

এই উদাহরণে, ব্রাউজারের ডিফল্ট শৈলীগুলি থেকে pএকটি গ্রহণ করা marginহয়। ব্রাউজার ডিফল্ট font-sizeসাধারণত 16px হয়। আপনার margin-top16px এরও বেশি কিছু থাকার পরে #childআপনি এটি অবস্থানের পদক্ষেপটি লক্ষ্য করতে শুরু করেন।

Answer 11

আমারও এই সমস্যাটি ছিল তবে নেতিবাচক মার্জিন হ্যাকগুলি প্রতিরোধ করতে পছন্দ করেছি, তাই আমি একটি রেখেছি

<div class="supercontainer"></div>

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

Answer 12

মজার বিষয় হল এই সমস্যার আমার প্রিয় সমাধানটি এখনও এখানে উল্লেখ করা হয়নি: ফ্লোট ব্যবহার করে।

এইচটিএমএল:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

এটি এখানে দেখুন: http://codepen.io/anon/pen/Iphol

মনে রাখবেন যে পিতামাতার উপর আপনার গতিশীল উচ্চতার প্রয়োজন হলে এটিও ভাসতে হয়, তাই কেবল এটির height:100px;দ্বারা প্রতিস্থাপন করুনfloat:left;

Answer 13

সঠিক উত্তরটি জানার আগে আমি একটি বিকল্প সমাধান খুঁজে পেলাম পিতামণ্ডলের উপাদানটিতে স্বচ্ছ সীমানা যুক্ত করা।

আপনার বাক্স অতিরিক্ত পিক্সেল ব্যবহার করবে যদিও ...

.parent {
    border:1px solid transparent;
}

Answer 14

topপরিবর্তে ব্যবহার margin-topকরা অন্য সম্ভাব্য সমাধান, যদি উপযুক্ত হয়।