এই সিএসএস মার্জিন-টপ স্টাইলটি কেন কাজ করে না?

Question

আমি অন্য ডিভের মধ্যে একটি ডিভের উপর মার্জিন মান যুক্ত করার চেষ্টা করি। শীর্ষস্থানীয় মান ব্যতীত সমস্ত ঠিকঠাক কাজ করে বলে মনে হয় এড়ানো হবে। কিন্তু কেন?

আমি যা প্রত্যাশা করেছি:

আমি যা পাই:

কোড:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

মার্জিন এইভাবে আচরণ করে কেন ডাব্লু 3 স্কুলগুলির কোনও ব্যাখ্যা নেই।

Comments

আপনি কি ভিতরেরটি ভাসানোর চেষ্টা করেছিলেন?

— মুরগি

হাম .. float:left;এটি কাজ করে ... তবে কেন এটি প্রয়োজন। আমি এটি ভাসতে চাই না। এবং বাম / ডান কাজের জন্য মার্জিন কেন?

— জ্যামিটেলিন

সিএসএস মার্জিন ধসের অ্যালগরিদমের মজাদার বিশ্বে আপনাকে স্বাগতম!

— গর্ডনএম

ডাব্লু 3 স্কুলগুলি বনাম ডাব্লু 3 সিডোক্স ... আমি মনে করি আমাদের বিজয়ী আছে। : ডি

— এন্ডারস্কিল

এর জেএসফিডেল, পরবর্তী লোকটিকে 25 সেকেন্ড বাঁচাতে jsfiddle.net/kLeu9

— কোডি বাগস্টিন

Answer 1

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

ডাব্লু 3 সি স্পেকের সম্পর্কিত পয়েন্টগুলি এখানে:

8.3.1 মার্জিন ভেঙে যাচ্ছে

সিএসএসে, দুটি বা ততোধিক বাক্সের সংলগ্ন মার্জিনগুলি (যা ভাইবোন হতে পারে বা নাও হতে পারে) একত্রিত হয়ে একক মার্জিন গঠন করতে পারে। এই উপায়ে একত্রিত হওয়া মার্জিনগুলি ধসে পড়ার কথা বলে এবং ফলস্বরূপ সম্মিলিত মার্জিনকে ধসে পড়েছে বলে margin ।

উল্লম্ব মার্জিন ভেঙে [...]

দুটি মার্জিন সংলগ্ন হয় যদি এবং কেবল যদি:

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

মার্জিনটি ভেঙে ফেলার জন্য আপনি নিম্নলিখিত যে কোনওটি করতে পারেন:

• আপনার দুটি ভাসা div উপাদানকে ভাসাবেন
• আপনার উভয় divউপাদানকে ইনলাইন ব্লক করুন
• সেট overflowএর #outerজন্যauto (অথবা কোন মান ছাড়া অন্য visible)

উপরের বিকল্পগুলি মার্জিনটি ভেঙ্গে ফেলা থেকে রোধ করার কারণ হ'ল:

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

বাম এবং ডান মার্জিনগুলি আপনার প্রত্যাশা মতো আচরণ করে কারণ:

অনুভূমিক মার্জিনগুলি কখনই ভেঙে যায় না।

Comments

স্পষ্টতই, আপনি বোকা ভাবছেন এমন

— একাই নন

এই উত্তর শিলা! কিছু যোগ করার জন্য। আপনার w3c এর উদ্ধৃতি এটি বলছে তবে আমি এখনই বুঝতে পেরেছি। সুতরাং অন্যের কাছে কেবল পরিষ্কার হওয়ার জন্য আপনি # ওটারকে একটি সীমানাও দিতে পারেন।

— ড্রিচেল

ভাসমান লিঙ্কটি ভাঙ্গা মনে হচ্ছে।

— ইপি

@ পেপাসেন্টি: আপনি যখন কোনও মন্তব্যে লিঙ্ক করবেন তখন এমনটি ঘটে। লিঙ্কমুক্ত করা হয়নি।

— বোল্টক্লক

আমি জানি - শুধু আপনাকে জানাতে চেয়েছিলাম আপনি যেহেতু সক্রিয় Iআক্ষেত্রটি আমি অনুভব করেছি আপনি মন্তব্যটি পুনরুত্থিত করতে চাইতে পারেন - বা সে অনুযায়ী আপনার পোস্টটি পরিবর্তন করতে পারেন। ভাল উত্তর জন্য ধন্যবাদ, যাইহোক।

— ইপি

Answer 2

display: inline-block;অভ্যন্তরীণ ডিভ ব্যবহার করার চেষ্টা করুন ।

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Comments

ভাল উত্তর. এই পরিবর্তনটি কেন সমস্যার সমাধান করে তা ব্যাখ্যা করলে এটি আরও ভাল।

— জনএফএক্স

ঠিক আছে, এটা অদ্ভুত! কেন যে কাজ করে? এটি যেমন প্রত্যাশায় কাজ করে না কেন তার যৌক্তিক ব্যাখ্যা কী। মার্জিন বাম / ডান ছাড়া কাজ করে display:inline-block;। ব্যবহার করার সময় পিছনে সেট করুন display:inline-block;আপনি ডিভের উপরে 100% প্রস্থ হারাবেন।

— জ্যামিটেলিন

এটিকে ইনলাইন-ব্লকে স্যুইচ করা ব্রাউজারকে তার স্থাপন করা এবং অন্যান্য নিয়ম প্রয়োগ করার পরে ডিভের আকারটি পুনরায় মূল্যায়ন করতে বাধ্য করে।

— মুরগি 16

আমার সমস্যার জন্য এটি চেষ্টা করে, একটি সিঁড়ি প্রভাব তৈরি করে।

— জনি

display:inline-blockআমার জন্য কাজ। তোমাকে অনেক ধন্যবাদ.

— স্টারকেন

Answer 3

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

সমাধান ঘ

কোনও ভাসমান বাক্স এবং অন্য কোনও বাক্সের মধ্যে মার্জিন ভেঙে যায় না (এমনকি একটি ফ্লোট এবং এর প্রবাহিত শিশুদের মধ্যেও নয়)।

তার মানে আমি বা ডেমো 1 এ যুক্ত float:leftকরতে পারি ।#outer#inner

এছাড়াও লক্ষ্য করুন যে মার্জিনে floatঅবৈধ হবে auto।

সমাধান 2

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

ছাড়া অন্য visible, এর যাক করা overflow: hiddenমধ্যে #outer। এবং এই উপায়টি বেশ সহজ এবং শালীন বলে মনে হচ্ছে। আমি এটা পছন্দ করি.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

সমাধান 3

একেবারে অবস্থানযুক্ত বাক্সগুলির মার্জিনগুলি ধসে পড়ে না (এমনকি তাদের প্রবাহিত শিশুদের সাথেও নয়)।

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

অথবা

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

এই দুটি পদ্ধতির স্বাভাবিক প্রবাহ ভঙ্গ করবে div

সমাধান 4

ইনলাইন-ব্লক বাক্সগুলির প্রান্তগুলি ধসে পড়ে না (এমনকি তাদের প্রবাহিত শিশুদের সাথেও নয়)।

@enderskill এর মতই

সমাধান 5

ইন-ফ্লো ব্লক-লেভেল এলিমেন্টের নীচের প্রান্তটি তার পরবর্তী ইন-ফ্লো ব্লক-লেভেল ভাইবিলিংয়ের শীর্ষ মার্জিনের সাথে সর্বদা পতিত হয়, যতক্ষণ না সেই ভাইবোন ছাড়পত্র ছাড়।

এটি প্রশ্নের সাথে খুব বেশি কিছু করার নেই কারণ এটি ভাই-বোনদের মধ্যে ভেঙে যাওয়া ব্যবধান। এটির অর্থ সাধারণত যদি কোনও শীর্ষ-বাক্স থাকে margin-bottom: 30pxএবং একটি ভাইবোন বাক্স থাকে margin-top: 10px। তাদের মধ্যে মোট মার্জিন এর 30pxপরিবর্তে 40px।

সমাধান 6

যদি উপাদানটির শীর্ষ সীমানা না থাকে, কোনও শীর্ষ প্যাডিং না থাকে এবং সন্তানের কোনও ছাড়পত্র না থাকে তবে ইন-ফ্লো ব্লক উপাদানের শীর্ষ প্রান্তটি তার প্রথম ইন-ফ্লো ব্লক-স্তরের বাচ্চার শীর্ষ মার্জিনের সাথে ধসে যায়।

এটি খুব আকর্ষণীয় এবং আমি কেবল একটি শীর্ষ সীমান্ত লাইন যুক্ত করতে পারি

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

এছাড়াও <div>ডিফল্টরূপে ব্লক-স্তরের, তাই আপনাকে এটি উদ্দেশ্য হিসাবে ঘোষণা করতে হবে না। আমার নবাগত খ্যাতির কারণে 2 টির বেশি লিঙ্ক এবং চিত্র পোস্ট করতে না পারায় দুঃখিত। পরের বার থেকে আপনি অনুরূপ কিছু দেখতে পেলে সমস্যাটি কোথায় থেকে আসে তা আপনি অন্তত জানেন।

Answer 4

আপনার যা আছে তা কেন কাজ করে না তা নিশ্চিত নয় তবে আপনি যুক্ত করতে পারেন

overflow: auto;

বাহ্যিক ডিভ যাও

Comments

এই সমস্যার বিভিন্ন সমাধানের বোঝা। ধন্যবাদ! @ বোল্টক্লক'এর উত্তরের সাথে মিলিত এই উত্তরটি কেন এই সমাধান কাজ করে সে সম্পর্কে ভাল তথ্য সরবরাহ করে।

— জ্যামিটেলিন

Answer 5

আপনি যদি কোনও প্যাডিং যুক্ত করেন তবে #outerএটি কার্যকর হয়।

ডেমো

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

Answer 6

কেন ঠিক তা নিশ্চিত নয়, তবে অভ্যন্তরীণ সিএসএস এ পরিবর্তন করা হচ্ছে

display:inline-block;

কাজ বলে মনে হচ্ছে;

Answer 7

"কেন" (কিছু ডাব্লু / ডুবে যাওয়া মার্জিন হতে হবে) এর উত্তর দেয় না, তবে আপনি যা করার চেষ্টা করছেন তা করার সবচেয়ে সহজ / সবচেয়ে লজিক্যাল উপায় বলে মনে হচ্ছে কেবল বাহ্যিক বিভাগে যুক্ত padding-topকরা :

http://jsfiddle.net/hpU5d/1/

মাইনর নোট - আপনার কোডটিতে display:block;অন্য কোনও কিছু না আটকানো হয় যদি না এটি ডিভ সেট করা প্রয়োজন হবে না।

Answer 8

এটা চেষ্টা কর:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

শুভকামনা

Answer 9

আমি সেটিং অনুমান অবস্থান সম্পত্তির #inner করার DIV আছে আপেক্ষিক এছাড়াও প্রভাব অর্জন সাহায্য করতে পারে। তবে যাইহোক আমি IE9 এবং সর্বশেষ গুগল ক্রোমে প্রশ্নে আটকানো মূল কোডটি চেষ্টা করেছিলাম এবং তারা ইতিমধ্যে কোনও পরিবর্তন ছাড়াই পছন্দসই প্রভাব দেয় give

Answer 10

padding-top:50pxবাইরের ডিভের জন্য ব্যবহার করুন । এটার মতো কিছু:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

দ্রষ্টব্য: প্যাডিং আপনার ডিভের আকার বাড়িয়ে তুলবে। এই ক্ষেত্রে যদি আপনার ডিভের আকারটি গুরুত্বপূর্ণ হয় তবে এর অর্থ একটি নির্দিষ্ট উচ্চতা থাকতে হবে কিনা must 50px দ্বারা উচ্চতা হ্রাস করুন:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Answer 11

আপনি কি চেষ্টা করেছেন! সর্বোপরি গুরুত্বপূর্ণ, এটি সবকিছুকে বাধ্য করবে:

margin:50px 50px 50px 50px !important;

Answer 12

কেবলমাত্র দ্রুত সমাধানের জন্য, আপনার সন্তানের উপাদানগুলিকে divএই জাতীয় উপাদানে আবদ্ধ করার চেষ্টা করুন -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

মধ্যে এবং ডিভের innerপ্যাডিংয়ের কারণে ডিভের মার্জিন ধসে পড়বে না । সুতরাং যৌক্তিকভাবে আপনার ডিভের বিদ্যমান মার্জিনের সাথে অতিরিক্ত স্থান থাকবে ।1pxouterinner1pxinner