মার্জিন-শীর্ষ ধাক্কা বাইরের ডিভি ডাউন

Question

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

এখানে একটি নমুনা কোড স্নিপেট। ধন্যবাদ!

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

Answer 1

করা overflow:autoপিতা বা মাতা মধ্যে div
এই লিংকের মাধ্যমে আরো দেখুন

Comments

overflow:hidden90% ক্ষেত্রে ভাল।

— vsync

উপচে পড়বে কেন: লুকানো ভাল?

— পিটারচন

@ পেটারচোন - কারণ অটো স্ক্রোলবার তৈরি করতে পারে

— ভাইসেক

আর কাজ করে না, এই লিঙ্কটিতে @

— এসডাব্লু

overflow: hiddenবা overflow: autoঅযাচিত পার্শ্ব প্রতিক্রিয়া সৃষ্টি করতে পারে, যার মধ্যে কয়েকটি সম্ভবত আপনি প্রথম দর্শনে দেখতে পাবেন না। আমি দেখেছি যে, পরিবর্তন marginকরার জন্য paddingকৌতুক আছে, উত্তর নীচে দাড়ায়। যদিও পুরো সমস্যাটি ঘটে তবে এখনও বুঝতে পারছি না।

— গিলাদ বার্নার

Answer 2

আমি কেন এই ঘটনার উপর একটি কঠিন ব্যাখ্যা না থাকে, কিন্তু আমি পরিবর্তন করে এই ঠিক করেছি top-marginকরতে top-padding, অথবা যোগ করার display: inline-blockউপাদান শৈলী।

সম্পাদনা: এটি আমার তত্ত্ব

মার্জিনগুলি কীভাবে ভেঙে যায় (সংযুক্ত) এটির সাথে এর কিছু করার আমার একটা বোধ আছে।

ডাব্লু 3 সি থেকে সংঘাতের মার্জিন থেকে :

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

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

এমন পরিস্থিতি রয়েছে যেখানে মার্জিনগুলি ভেঙে পড়ে না যা ( মার্জিন্স ভেঙে ফেলা থেকে ) এটি চারপাশে খেলার উপযুক্ত হতে পারে :

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

Comments

এছাড়াও, ভেঙে যাওয়া মার্জিনের সাথে উপাদানটির ভিতরে প্যাডিং বা সীমানা (অভ্যন্তরীণ এক) এটি ভেঙে ফেলা হবে।

— বেনামে

এটি আমার জন্য কাজ করেছিল - আমার ধারকটিতে আমার নিখুঁত উপাদান (একটি ড্রপ-ডাউন) ছিল, তাই ওভারফ্লো: অটো কাজ করে না।

— mwilcox

Answer 3

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

• displayছাড়াও সেট করুন block।
• floatছাড়াও সেট করুন none।
• মার্জিনটি সরিয়ে ফেলুন এবং পরিবর্তে ব্যবহার করুন padding। উদাহরণস্বরূপ, যদি আপনার সাথে থাকে তবে margin-top: 10pxপ্রতিস্থাপন করুন padding-top: 10px;।
• মার্জিন সরান, এবং এর পরিবর্তে ব্যবহার position( absoluteবা relativeবৈশিষ্ট্যাবলী সঙ্গে) top, bottomইত্যাদি উদাহরণস্বরূপ, যদি আপনি ছিল margin-top: 10px, সঙ্গে প্রতিস্থাপন position: relative; top: 10px;।
• যেদিকে মার্জিনগুলি ভেঙে চলেছে সেখানে প্যারেন্ট উপাদানটিতে একটি paddingবা একটি যুক্ত করুন । সীমানাটি 1px এবং স্বচ্ছ হতে পারে।border
• সেট overflowছাড়া অন্য visibleথেকে পিতা বা মাতা উপাদান।

Answer 4

আমি জানি এটি একটি পুরানো সমস্যা, আমি এটি বহুবার এসেছি। সমস্যাটি হ'ল এখানে সমস্ত ফিক্স হ্যাক যাঁর সম্ভবত অনিচ্ছাকৃত পরিণতি ঘটতে পারে।

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

<div>
    <h1>Test</h1>
</div>

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

সুতরাং এখানে বেশিরভাগ পোস্ট যেমন অদ্ভুত হ্যাকগুলি অবলম্বন না করে এটির একটি সহজ সমাধান রয়েছে (কোনও অপমানের উদ্দেশ্যে নয়, এটি কেবল সত্য) - কেবল আসল ব্যাখ্যাটিতে ফিরে যান - ...if the first element inside a container has a top margin...- এর অনুসরণ করে আপনার অতএব প্রয়োজন একটি ধারক মধ্যে প্রথম উপাদান না একটি শীর্ষ মার্জিন আছে। ঠিক আছে, তবে আপনার ডকুমেন্টে শব্দার্থে হস্তক্ষেপ না করে এমন উপাদানগুলি না যুক্ত আপনি কীভাবে এটি করবেন?

সহজ! ছদ্ম-উপাদান! আপনি এটি ক্লাস বা প্রাক-সংজ্ঞায়িত মিক্সিনের মাধ্যমে করতে পারেন। একটি :beforeছদ্ম-উপাদান যুক্ত করুন:

ক্লাসের মাধ্যমে সিএসএস:

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

এটির সাহায্যে উপরের মার্কআপ উদাহরণটি অনুসরণ করে আপনি নিজের ডিভটি পরিবর্তন করতে পারবেন:

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

কেন এই কাজ করে?

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

প্র: কেন উচ্চতা: .0000001 মিমি?

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

অদ্ভুত প্রদর্শন শৈলী যুক্ত করার পরিবর্তে এই সমস্যাটি সমাধানের জন্য আপনি এখন ক্লাস (বা আরও ভাল, SASS / LSS এ, একটি মিক্সিন!) যুক্ত করতে পারেন যা যখন আপনি আপনার উপাদানগুলির সাথে অন্যান্য জিনিস করতে চান, উদ্দেশ্যমূলকভাবে উপাদানগুলির উপর মার্জিনকে সরিয়ে ফেলেন এবং / অথবা প্যাডিং বা অদ্ভুত অবস্থান / ভাসা শৈলীর সাথে এটি প্রতিস্থাপন করা যা সত্যই এই সমস্যাটি সমাধান করার উদ্দেশ্যে নয়।

Comments

.0000001 মিমি আপনার ফিক্সটি ভেঙে আইই 11-তে সত্যিই শূন্যের দিকে ফিরে আসে। আমি যখন এটি .01 এ পরিবর্তন করি তবে এটি কাজ করে।

— এসিজার

আমি কল্পনা করি যে .01 এমএম এখনও কার্যকরভাবে শূন্যের পক্ষে যথেষ্ট হবে। ভাল যুক্তি. উল্টোদিকে, এখন এটি 2018, আমাদের অনেকগুলি শীঘ্রই IE11 এর জন্য সমর্থন ত্যাগ করবে, বিশেষত সাম্প্রতিক ঘোষণার সাথে যে এমএস আবার একটি নতুন ব্রাউজার তৈরি করবে (ক্রোমিয়ামের উপর ভিত্তি করে এই সময়টি বাদ দিয়ে, যার অর্থ এটি - তাত্ত্বিকভাবে - পুরোপুরি স্তন্যপান হবে না)। : ডি

— ডুবেওয়াদ

Answer 5

display: flexএই ক্ষেত্রে কাজ করবে। অভিভাবক উপাদান দিন display: flex;এবং তারপরে আপনার প্রয়োজনীয়তা অনুসারে মার্জিনটি h1ট্যাগকে দিন।

Answer 6

আজ এই ইস্যুটি চালান।

overflow: hidden আমার আরও উপাদান অনুসরণ করার সময় আশানুরূপ কাজ হয়নি।

তাই আমি পিতামাতার ডিভের প্রদর্শন সম্পত্তি পরিবর্তন করার চেষ্টা করেছি এবং display: flexকাজ করেছি !!!

আশা করি এটি কারও সাহায্য করবে। :)

Answer 7

প্যারেন্ট উপাদান শীর্ষে সামান্য বিস্তৃত প্যাড যুক্ত করা এই সমস্যাটি সমাধান করতে পারে।

.parent{
  padding-top: 0.01em;
}

আপনি যদি ওভারল্যাপিং এফেক্ট তৈরি করে থাকেন তবে পিতামাতার উপাদানগুলির বাইরে দৃশ্যমান হওয়ার জন্য আপনার যদি পিতামাতার অভ্যন্তরের কোনও উপাদান প্রয়োজন হয় তবে এটি দরকারী।

Answer 8

মার্জিন ধসের কারণে এটি ঘটে। যখন সন্তানের উপাদান পিতামাতার উপাদানগুলির সীমানা স্পর্শ করে এবং তখন তাদের মধ্যে কোনও মার্জিনের সাথে প্রয়োগ করে:

1. যে মার্জিনটি সবচেয়ে বেশি তা জিতবে (প্রয়োগ)।

2. যদি তাদের কারও কারও মার্জিন থাকে তবে উভয়ই ভাগ করে নেবে।

সলিউশন

1. পিতামাতার সীমানা প্রয়োগ করুন যা পিতামাতার এবং সন্তানের পৃথক করে।
2. প্যাডিংয়ের জন্য প্যাডিং প্রয়োগ করুন যা পিতামাতার এবং সন্তানের পৃথক করে তোলে।
3. পিতামাতার পরিবর্তে ওভারফ্লো প্রয়োগ করুন।
4. অভিভাবক ডিভিউতে ভার্চুয়াল উপাদান তৈরি করতে এর আগে বা পরে ব্যবহার করুন যা মার্জিন প্রয়োগকৃত শিশু এবং পিতামাতার থেকে পৃথক হতে পারে।
5. মার্জিন প্রয়োগিত শিশু এবং পিতামাতার মধ্যে একটি এইচটিএমএল উপাদান তৈরি করুন তাদের এগুলি পৃথক করতে পারে।