example - html computer code




কেন এই ইনলাইন-ব্লক ডিভি উপাদানগুলির মধ্যে একটি অনুমানযোগ্য ফাঁক নেই? (4)

আপনি যোগ করতে হবে

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

কারন যখনই আপনি display:inline-block লিখবেন display:inline-block এটি অতিরিক্ত margin-right:4px নেয় margin-right:4px । সুতরাং, আপনি এটি অপসারণ করতে হবে।

আমার দুটি ইনলাইন-ব্লক div উপাদান রয়েছে, যা একে অপরের পাশে অবস্থিত। যাইহোক, মার্জিন 0 এ সেট করা সত্ত্বেও দুটি divs মধ্যে 4 পিক্সেলের একটি রহস্যময় স্থান বলে মনে হচ্ছে। তাদের কোন অভিভাবক divs প্রভাবিত হয় - কি হচ্ছে?

সিএসএস

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

আমি এটা দেখতে চাই:


এই উদাহরণে, আপনার div উপাদান block স্তরের উপাদানগুলি থেকে inline উপাদানগুলিতে পরিবর্তিত হয়েছে। inline উপাদানগুলির একটি সাধারণ বৈশিষ্ট্য হল তারা মার্কআপের হোয়াইট স্পেসকে সম্মান করে। এই উপাদানগুলির মধ্যে স্থানটির একটি ফাঁক কেন উৎপন্ন হয় তা ব্যাখ্যা করে। (example)

এই সমাধান করার জন্য কয়েকটি সমাধান ব্যবহার করা যেতে পারে।

পদ্ধতি 1 - মার্কআপ থেকে হোয়াইটস্পেস সরান

উদাহরণ 1 - হোয়াইট স্পেস মন্তব্য করুন: (example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

উদাহরণ 2 - লাইন বিরতি সরান: (example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

উদাহরণ 3 - পরবর্তী লাইনের ট্যাগের অংশটি বন্ধ করুন (example)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

উদাহরণ 4 - পরবর্তী লাইনের পুরো ট্যাগটি বন্ধ করুন: (example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

পদ্ধতি 2 - font-size পুনরায় সেট করুন

যেহেতু inline উপাদানের মধ্যে হোয়াইটস্পেস font-size দ্বারা নির্ধারিত হয়, তাই আপনি কেবল font-size 0 পুনরায় সেট করতে পারেন এবং এভাবে উপাদানগুলির মধ্যে স্থানটি সরাতে পারেন।

শুধুমাত্র font-size: 0 সেট করুন font-size: 0 প্যারেন্ট উপাদানগুলিতে, এবং তারপরে শিশু উপাদানগুলির জন্য একটি নতুন font-size ঘোষণা করুন। এই কাজ, এখানে প্রদর্শিত হিসাবে কাজ করে (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

এই পদ্ধতিটি বেশ ভাল কাজ করে, কারণ এটি মার্কআপে কোন পরিবর্তন করার প্রয়োজন হয় না; তবে, যদি শিশু উপাদানটির font-size em ইউনিট ব্যবহার করে ঘোষণা করা হয় তবে এটি কাজ করে না। তাই আমি মার্কআপ থেকে হোয়াইটস্পেস সরানোর সুপারিশ করব, বা বিকল্পভাবে ভাসমান উপাদানগুলি এবং এইভাবে inline উপাদানগুলি দ্বারা উত্পন্ন স্থান এড়াতে সুপারিশ করব।

পদ্ধতি 3 - display: flex করতে প্যারেন্ট উপাদান সেট করুন display: flex

কিছু ক্ষেত্রে, আপনি প্যারেন্ট উপাদানটির flex display সেট করতে পারেন। (example)

এটি কার্যকরভাবে সমর্থিত ব্রাউজারের উপাদানগুলির মধ্যে স্পেসগুলি সরিয়ে দেয়। অতিরিক্ত সমর্থনের জন্য উপযুক্ত বিক্রেতা উপসর্গ যোগ করতে ভুলবেন না।

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}
<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

পাশাপাশি নোট:

inline উপাদানগুলির মধ্যে স্থানটি সরাতে নেতিবাচক মার্জিন ব্যবহার করার জন্য এটি অবিশ্বাস্যভাবে অবিশ্বাস্য। অন্যান্য, আরও অনুকূল সমাধান, যদি না নেতিবাচক মার্জিন ব্যবহার করবেন না দয়া করে।


ফ্লেক্স জড়িত একটি সমাধান খুঁজে পাওয়া যায় নি, কারণ ফ্লেক্স পুরানো ব্রাউজারে কাজ করে না। উদাহরণ:

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}

inline-block ব্যবহার করে আপনার এইচটিএমএল-তে হোয়াইট-স্পেসের অনুমতি দেয়, এটি সাধারণত .25em (বা 4px) সমান।

আপনি সাদা-স্থানটি মন্তব্য করতে পারেন অথবা আরও কমন্স সমাধানটি, পিতামাতার font-size 0 এ সেট করতে এবং ইনলাইন-ব্লক উপাদানগুলিতে এটি প্রয়োজনীয় আকারে পুনরায় সেট করতে হয়।





padding