আমি কীভাবে ইনলাইন / ইনলাইন-ব্লক উপাদানগুলির মধ্যে স্থানটি সরিয়ে ফেলব?

Question

এই এইচটিএমএল এবং সিএসএস দেওয়া:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

ফলস্বরূপ, স্প্যান উপাদানগুলির মধ্যে একটি 4 পিক্সেল প্রশস্ত স্থান থাকবে।

ডেমো: http://jsfiddle.net/dGHFV/

আমি কেন বুঝতে পারি তা বুঝতে পেরেছি এবং আমি আরও জানি যে এইচটিএমএল উত্স কোডে স্প্যান উপাদানগুলির মধ্যে শ্বেত-স্থান সরিয়ে আমি সেই স্থানটি থেকে মুক্তি পেতে পারি:

<p>
    <span> Foo </span><span> Bar </span>
</p>

যাইহোক, আমি এমন একটি সিএসএস সমাধানের জন্য আশা করছিলাম যাতে এইচটিএমএল উত্স কোডের সাথে টেম্পার করতে হবে না।

আমি জাভাস্ক্রিপ্ট দিয়ে এটি কীভাবে সমাধান করবেন তা আমি জানি - ধারক উপাদান (অনুচ্ছেদ) থেকে পাঠ্য নোডগুলি সরিয়ে যেমন:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

ডেমো: http://jsfiddle.net/dGHFV/1/

তবে এই সমস্যাটি কি কেবল সিএসএস দিয়ে সমাধান করা যাবে?

Comments

এখন প্রাসঙ্গিক বিকল্প একটি পূর্ণ সেট জন্য এই প্রশ্নে আমার উত্তর দেখুন: stackoverflow.com/questions/14630061/...

— ktamlyn

অতিরিক্ত রেফারেন্স: 1. davidwalsh.name/remove-whitespace-inline-block 2. css-tricks.com/fighting-the-space-between-inline-block-elements

— romelmederos

সংশ্লিষ্ট: stackoverflow.com/a/59357436/104380

— VSync

Answer 1

যেহেতু এই উত্তরটি বরং জনপ্রিয় হয়ে উঠেছে, তাই আমি এটি উল্লেখযোগ্যভাবে আবার লিখছি।

আসল প্রশ্নটি ভুলে যাব না যা জিজ্ঞাসা করা হয়েছিল:

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

এটা তোলে হয় একা CSS এর সঙ্গে এই সমস্যার সমাধান করা সম্ভব, কিন্তু নেই সম্পূর্ণভাবে শক্তসমর্থ সিএসএস সংশোধন করা হয়েছে।

আমার প্রাথমিক উত্তরে আমার যে সমাধানটি হয়েছিল তা হ'ল font-size: 0পিতামাতার উপাদানগুলিতে যুক্ত করা এবং তারপরে একটি বুদ্ধিমানের ঘোষণা করাfont-size বাচ্চাদের সম্পর্কে ।

http://jsfiddle.net/thirtydot/dGHFV/1361/

এটি সমস্ত আধুনিক ব্রাউজারের সাম্প্রতিক সংস্করণগুলিতে কাজ করে। এটি IE8 এ কাজ করে। এটা তোলে সাফারি 5 কাজ করে না, কিন্তু এটা করে সাফারি 6. সাফারি 5 কাজ প্রায় এক মৃত ব্রাউজার (হয় 0.33%, আগস্ট 2015 )।

আপেক্ষিক হরফ আকার সহ বেশিরভাগ সম্ভাব্য সমস্যা সমাধান করা জটিল নয়।

তবে এটি যদি একটি যুক্তিসঙ্গত সমাধান হয় তবে আপনার যদি বিশেষত কোনও সিএসএসের সমাধান প্রয়োজন হয় , তবে আপনি আপনার এইচটিএমএল পরিবর্তন করতে মুক্ত হন (তবে আমাদের বেশিরভাগ মানুষই রয়েছেন) তবে আমি এটি প্রস্তাব করি না।

---

যুক্তিযুক্ত অভিজ্ঞ ওয়েব বিকাশকারী হিসাবে আমি এই সমস্যাটি সমাধান করার জন্য আসলে এটি করি:

<p>
    <span>Foo</span><span>Bar</span>
</p>

হ্যা, তা ঠিক. আমি ইনলাইন-ব্লক উপাদানগুলির মধ্যে এইচটিএমএলটিতে শ্বেত স্থানটি সরিয়েছি।

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

সাদা স্থানটি কোথা থেকে আসবে তা আপনাকে কখনও কখনও সাবধানতার সাথে বিবেচনা করতে হবে। জাভাস্ক্রিপ্টের সাথে আরও একটি উপাদান যুক্ত করা কি সাদা স্থান যুক্ত করবে?না, আপনি যদি এটি সঠিকভাবে করেন তবে না।

আসুন কিছু নতুন এইচটিএমএল দিয়ে সাদা স্থান সরিয়ে ফেলতে বিভিন্ন উপায়ে একটি যাদুকরী যাত্রায় চলুন:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• আপনি সাধারণত এটি করতে পারেন:

  <ul>
      <li>Item 1</li><li>Item 2</li><li>Item 3</li>
  </ul>

  http://jsfiddle.net/thirtydot/dGHFV/1362/

• অথবা এটা:

  <ul>
      <li>Item 1</li
      ><li>Item 2</li
      ><li>Item 3</li>
  </ul>

• অথবা, মন্তব্যগুলি ব্যবহার করুন:

  <ul>
      <li>Item 1</li><!--
      --><li>Item 2</li><!--
      --><li>Item 3</li>
  </ul>

• বা, আপনি যদি পিএইচপি বা অনুরূপ ব্যবহার করে থাকেন:

  <ul>
      <li>Item 1</li><?
      ?><li>Item 2</li><?
      ?><li>Item 3</li>
  </ul>

• বা, আপনি এমনকি কিছু বন্ধ করার ট্যাগগুলি পুরোপুরি এড়িয়ে যেতে পারেন (সমস্ত ব্রাউজারগুলি এটির সাথে ঠিক আছে):

  <ul>
      <li>Item 1
      <li>Item 2
      <li>Item 3
  </ul>

এখন যেহেতু আমি আপনাকে "হোয়াইটস্পেস অপসারণের এক হাজার বিভিন্ন উপায়ে, ত্রিশদটের মাধ্যমে" মেরে ফেলেছি, আশা করি আপনি সব ভুলে গেছেন font-size: 0।

---

বিকল্পভাবে, আপনি পূর্বে ইনলাইন-ব্লক ব্যবহার করেছেন এমন অনেকগুলি বিন্যাস অর্জন করতে আপনি এখন ফ্লেক্সবক্স ব্যবহার করতে পারেন : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

এটি FF3.6, IE9RC, O11, Ch9 এ কাজ করে। তবে, সাফারি 5-তে এখনও 1px প্রশস্ত ফাঁক রয়েছে:(

— remainsime Vidas

@ থার্টিডট আপনি কি এই উত্তরের মন্তব্যটি পরীক্ষা করে দেখতে পারেন ? এমনটি হতে পারে যে এই font-size:0ট্রিকটি সর্বোপরি ভাল ধারণা নয় ...

— Vidime বিদাস

আমি জানি পোস্টারটি একটি সিএসএস সমাধান খুঁজছেন, তবে এই সমাধানটি - যা এখন পর্যন্ত সবচেয়ে বেশি ভোট হয়েছে (30 টি ভোট বনাম 5 এটি লেখার সাথে সাথে) - এর শক্তিশালী পার্শ্ব প্রতিক্রিয়া রয়েছে এবং এমনকি ক্রস ব্রাউজারও কাজ করে না। এই মুহুর্তে এটি কেবল আপনার এইচটিএমএল-এ সমস্যাযুক্ত হোয়াইটস্পেস অপসারণ করা আরও যুক্তিযুক্ত।

— স্টিপ থিরিওন

এই সমাধান কেবলমাত্র তখনই কাজ যদি আপনি আপনার ধারক মাপ জন্য EMS সঙ্গে কাজ আত

— Meo

এটি আপেক্ষিক ফন্ট-আকারের সাথে শিশু উপাদানগুলিকে ভেঙে দেয়।

— ড্যানিয়েল

Answer 2

CSS3 অনুসারে ব্রাউজারগুলির জন্য রয়েছে white-space-collapsing:discard

দেখুন: http://www.w3.org/TR/2010/WD-css3-text-20101005/# সাদা-স্পেস-collapsing

Comments

আপনি ব্যবহার করতে দিবেন না trim-innerবদলে discard?

— spb

এটি পাঠ্য স্তর 3 থেকে সরানো হয়েছে, তবে পাঠ্য স্তর 4 রয়েছে । এটি ইতিমধ্যে 2016 এবং এখনও কোনও সমর্থন নেই। text-space-collapse:discard

— ওরিওল

@ মিঃলিস্টার: অন্যান্য সমাধানগুলি সমস্ত ক্ষেত্রে কার্যকর হয় না। উদাহরণস্বরূপ আমি এমন কোনও সমাধান সম্পর্কে জানি না, যা <p>A long text...</p>পূর্ববর্তী স্থান সরিয়ে ফেলবে , যেখানে পাঠ্য সামগ্রীর চেয়ে পৃথক লাইনে খোলার এবং বন্ধ করার ট্যাগ রয়েছে। আমার এইচটিএমএল ফাইলগুলি পরিপাটি করে রাখতে এবং পঠনযোগ্য রাখার জন্য আমি এটি সর্বদা করি।

— রবার্ট কুজনিয়ার

@ রবার্টfloat

— মিস্টার লিস্টার

@ মিরিলিস্টার ভাসমান প্রকৃতপক্ষে পিছনের স্থানটি সরিয়ে দেয় তবে এর মারাত্মক পার্শ্ব-প্রতিক্রিয়া রয়েছে - ধারকের বিন্যাসে উপাদানটির অবস্থানকে পুরোপুরি পরিবর্তন করে। আমি কীভাবে এটি করব, যখন কোনও উপাদান ভাসমান আমার লেআউটটি নষ্ট করে দেয় (যা সাধারণত হয়)?

— রবার্ট কুজনিয়ার

Answer 3

সম্পাদনা করুন:

আজ, আমাদের কেবল ফ্লেক্সবক্স ব্যবহার করা উচিত ।

---

পুরানো উত্তর:

ঠিক আছে, যদিও আমি উভয় font-size: 0;এবং not implemented CSS3 featureউত্তর উভয়ই upvated করেছি , চেষ্টা করার পরে আমি জানতে পারি যে এগুলির কোনওই আসল সমাধান নয় ।

প্রকৃতপক্ষে, শক্তিশালী পার্শ্ব প্রতিক্রিয়াগুলি ছাড়া একটি কার্যকারিতাও নেই।

তারপরে আমিinline-block আমার HTMLউত্স ( JSP) থেকে ডিভের মধ্যে ফাঁকা স্থান (এই উত্তরগুলি এই যুক্তি সম্পর্কে) সরিয়ে ফেলার সিদ্ধান্ত নিয়েছি ( )

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

এই

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

এটা কুৎসিত, কিন্তু কাজ করে।

তবে, এক মিনিট অপেক্ষা করুন ... আমি যদি আমার ডিভগুলি ভিতরে তৈরি করি Taglibs loops(তবে Struts2,JSTL , ইত্যাদি ...)?

উদাহরণ স্বরূপ:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Stuff সমস্ত জিনিসকে ইনলাইন করা একেবারেই ভাবা যায় না, এর অর্থ হবে

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

এটি পঠনযোগ্য নয়, মানটেন এবং বোঝা শক্ত নয় ইত্যাদি ...

আমি যে সমাধানটি পেয়েছি:

এইচটিএমএল মন্তব্যগুলি ব্যবহার করুন একটি ডিভের শেষটি পরেরটির শুরুতে সংযোগ করতে!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

এইভাবে আপনার একটি পঠনযোগ্য এবং সঠিকভাবে ইনডেন্ট কোড থাকবে।

এবং, একটি ইতিবাচক পার্শ্ব প্রতিক্রিয়া হিসাবে HTML source , যদিও, খালি মন্তব্য দ্বারা আক্রান্ত, সঠিকভাবে ইন্টেন্টেড হবে;

প্রথম উদাহরণটি নেওয়া যাক। আমার বিনীত মতে, এটি:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

এর থেকে ভাল:

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Comments

নোট করুন যে এটি আপনার সম্পাদকের কোড ফোল্ডিং কার্যকারিতাও ভঙ্গ করতে পারে।

— jknotek

Answer 4

সাদা স্থান না থাকার জন্য উপাদানগুলির মধ্যে মন্তব্য যুক্ত করুন । আমার জন্য ফন্টের আকারটি শূন্যে পুনরায় সেট করা এবং তারপরে এটি আবার সেট করা থেকে সহজ।

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Comments

এটি এমন একটি হ্যাক যা আমাদের ২০২০ সালে ব্যবহার করা উচিত নয়: পরিবর্তে caniuse.com/#feat=flexbox

— টনিগাত্তা

উত্তর 2013 সালে লেখা হয়েছিল এবং যখন flexbox প্রশ্ন এই এক তন্ন তন্ন কিন্তু খুব কাজ উপর একটি উত্তর নয়: stackoverflow.com/a/37512227/1019850

— ডেভিড

Answer 5

এর জন্য সমস্ত স্থান নির্মূলের কৌশল display:inline-blockহ'ল ন্যক্কার হ্যাক ...

ফ্লেক্সবক্স ব্যবহার করুন

এটা ভয়ঙ্কর, সমাধান এই ইনলাইন-ব্লক লেআউট BS, এবং 2017 এর হিসাবে রয়েছে 98% ব্রাউজার সমর্থনের (আরও যদি আপনি পুরানো ies যত্ন সম্পর্কে না)।

• আমরা কি ফ্লেক্সবক্স ব্যবহার করতে প্রস্তুত?
• সিএসএস নমনীয় বাক্সগুলি ব্যবহার করে - ওয়েব বিকাশকারী গাইড MDN
• ফ্লেক্সবক্সের একটি সম্পূর্ণ গাইড | সিএসএস-ট্রিকস
• ফ্লেসি বক্সস - সিএসএস ফ্লেক্সবক্স খেলার মাঠ এবং কোড উত্পন্নকরণ সরঞ্জাম

Comments

কদর্য হ্যাক হতে পারে, তবে ফন্ট-আকার: 0 ব্রাউজারগুলির 100% এ কাজ করে এবং প্রদর্শন প্রয়োগ করে: ইনলাইন-ফ্লেক্স এখনও অতিরিক্ত সাদা অংশ থেকে মুক্তি পাবে না, এমনকি এমন কোনও ব্রাউজারও সমর্থন করে যা এটি সমর্থন করে!

— প্যাট্রিক

@ পেট্রিক ফ্লেক্সবক্স অবশ্যই সমস্যাটি সমাধান করে, আপনি কেবল এটি ভুল করছেন। ইনলাইন-ফ্লেক্সটি ইনলাইন ফ্লেক্স আইটেমগুলি প্রদর্শন করে না - এটি কেবলমাত্র ধারকগুলিতে প্রযোজ্য। দেখুন stackoverflow.com/a/27459133/165673

— Yarin

"ফন্ট-আকার: 0" 100% ব্রাউজারে কাজ করে না । (সর্বনিম্ন ফন্ট আকার ব্রাউজার সেটিংস)। এবং এই উত্তর সত্যিই ভাল।

— ভিলিউসএল

Answer 6

যোগ display: flex;পিতা বা মাতা উপাদানে। এখানে একটি উপসর্গ সহ সমাধান:

সরলীকৃত সংস্করণ 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

---

উপসর্গ with দিয়ে ঠিক করুন 👇

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Comments

এটি একটি দুর্দান্ত উত্তর! যদিও, আমি মনে করি সরলীকৃত সংস্করণটি শীর্ষে রাখাই ঝরঝরে হবে, যাতে এটি পাঠক প্রথম দেখেন। অথবা এমনকি অ-সরল সংস্করণও মুছে ফেলতে পারে।

— স্টেফনচ

@ স্টেফনটচ সম্পন্ন ✅ আপনার মূল্যবান পরামর্শের জন্য ধন্যবাদ :-)

— মো।

Answer 7

এটি সম্পর্কিতটিতে আমি একই উত্তরটি দিয়েছিলাম: প্রদর্শন: ইনলাইন ব্লক - সেই স্থানটি কী?

খুব সহজ এবং শব্দার্থক উভয়ই ইনলাইন-ব্লক থেকে সাদা স্থান সরিয়ে ফেলার সত্যিই একটি সহজ উপায়। একে শূন্য-প্রস্থের ফাঁকা জায়গাগুলি সহ একটি কাস্টম ফন্ট বলা হয়, যা আপনাকে খুব ক্ষুদ্র ফন্ট ব্যবহার করে হোয়াইটস্পেস (ব্রাউজার দ্বারা ইনলাইন উপাদানগুলির জন্য পৃথক লাইনের সাথে যুক্ত করার জন্য যুক্ত করা হয়) ভেঙে ফেলার অনুমতি দেয়। আপনি ফন্টটি ঘোষণার পরে, আপনি কেবল পরিবর্তন করুনfont-family ধারকটির উপরটি এবং আবার বাচ্চাদের কাছে ফিরে যান এবং ভয়েলা। এটার মত:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

স্বাদ মত স্যুট। আমি স্রেফ ফন্ট-ফোর্জে রান্না করেছি এবং ফন্টসকিয়ারেল ওয়েবফন্ট জেনারেটরের সাথে রূপান্তরিত হ'ল ফন্টের একটি ডাউনলোড এখানে। আমাকে 5 মিনিটের সব নিয়েছে। সিএসএস@font-face ঘোষণাটি অন্তর্ভুক্ত রয়েছে: শূন্য-প্রস্থের স্পেস ফন্টটি জিপ করা হয়েছে । এটি গুগল ড্রাইভে রয়েছে তাই আপনার কম্পিউটারে এটি সংরক্ষণ করতে আপনার ফাইল> ডাউনলোড ক্লিক করতে হবে। আপনি যদি ঘোষণাটি আপনার মূল সিএসএস ফাইলে অনুলিপি করেন তবে আপনাকে সম্ভবত ফন্টের পথগুলিও পরিবর্তন করতে হবে।

Comments

আমি আপনাকে এটি সিএসএস ট্রিকগুলিতে পোস্ট করতে দেখেছি বলে মনে করি এবং আমার কাছে এটি দুর্দান্ত উত্তর। এটি হালকা ওজনের, প্রয়োগ করা সহজ এবং ক্রস ব্রাউজার (এখনও পর্যন্ত আমার পরীক্ষাগুলি দেখিয়েছে)। আমি সম্পূর্ণ ফ্লেক্সবক্সের সাথে যাচ্ছিলাম যতক্ষণ না বুঝে ফায়ারফক্স flex-wrapকমপক্ষে v28 ( srsly? ) অবধি সমর্থন করবে না , তবে এটি ততক্ষণ পর্যন্ত একটি নিখুঁত ফলব্যাক।

— অনাবশ্যক

এটি ওভারকিলের মধ্যে সবচেয়ে খারাপ পরিস্থিতি যা আমি দীর্ঘ সময় দেখেছি। কোনও স্থান সরাতে পুরো ফন্টটি ডাউনলোড করবেন? গীজ।

— মিস্টার লিস্টার

@ মিঃলিস্টার আপনি কি বুঝতে পেরেছেন যে এই জাতীয় ফন্ট ফাইলটি ক্ষুদ্র একটি? এটি কোনও গ্লাইফগুলি ভিতরে প্রবেশ করে না। আমি এটির পরিবর্তে এটিকে এনকোড করা বেস 64 কে অন্তর্ভুক্ত করার পক্ষে যুক্তি দেব যাতে আমরা অনুরোধ থেকেও মুক্তি পাই।

— রবার্ট করিতনিক

আইকন ফন্টগুলির মতো এটির মারাত্মক ত্রুটি রয়েছে, যেমন ওয়েব ফন্টগুলি ব্লক করা হয় (যেমন ব্যান্ডউইথ বা সুরক্ষার কারণে) বা কাস্টম ফন্টগুলির দ্বারা ওভাররাইট করা হয় (যেমন স্বাস্থ্য সংক্রান্ত কারণে যেমন ডাইলেক্সিয়া ইত্যাদি) তখন এটি কার্যকর হবে না।

— tomasz86

Answer 8

সিএসএস পাঠ্য মডিউল স্তর 3 এর উপর ভিত্তি করে আরও দুটি বিকল্প ( white-space-collapsing:discardযার পরিবর্তে অনুমানের খসড়া থেকে বাদ দেওয়া হয়েছিল):

• word-spacing: -100%;

তাত্ত্বিকভাবে, এটি ঠিক যা করা দরকার তা করা উচিত - স্পেস অক্ষরের প্রস্থের 100% দ্বারা শূন্যের দ্বারা 'শব্দের' মধ্যে শ্বেত স্পেসগুলি ছোট করা উচিত। দুর্ভাগ্যক্রমে এবং কোথাও কাজ করবে না বলে মনে হচ্ছে এবং এই বৈশিষ্ট্যটি 'ঝুঁকির মধ্যে' চিহ্নিত রয়েছে (এটিও স্পেসিফিকেশন থেকে বাদ দেওয়া যেতে পারে)।

• word-spacing: -1ch;

এটি আন্তঃ-শব্দ স্পেসগুলি সংখ্যার '0' প্রস্থের দ্বারা সংক্ষিপ্ত করে তোলে। মনসস্পেস ফন্টে এটি স্পেস অক্ষরের প্রস্থের (এবং অন্য কোনও অক্ষরের পাশাপাশি) সমান হওয়া উচিত। এটি ফায়ারফক্স 10+, ক্রোম 27+ এ কাজ করে এবং প্রায় ইন্টারনেট এক্সপ্লোরার 9+ এ কাজ করে।

বেহালা

Comments

শব্দ-ব্যবধানের জন্য +1, যদিও -0.5ch হ'ল মান, ফাঁকা ছাড়াই -1ch পাঠ্য পাঠযোগ্য হবে না, -0.5ch ঠিক হরফ-আকারের মতো আচরণ করে: 0; পাঠ্য উপাদানগুলিতে সুস্পষ্ট সেট আকার সহ। :)

— ডেনিস98

@ ডেনিস ৯৮, -১ এইচ কেবল মনোস্পেস ফন্টের জন্য কাজ করে (যেমন কুরিয়ার নিউ যেমন), কারণ তাদের সমস্ত অক্ষরের সাথে একই প্রস্থ রয়েছে ' 'এবং রয়েছে '0'। নন-মোনস্পেস ফন্টগুলিতে প্রস্থ ' 'এবং '0'অক্ষরের মধ্যে কোনও উপযুক্ত উপযুক্ত যাদু অনুপাত নেই , তাই chএটি মোটেই বেশি সহায়ক নয়।

— ইলিয়া স্ট্রেলটসিন

পরিবর্তে word-spacing, আমরা ব্যবহার করতে পারে letter-spacingযেমন দেখানো একটি অবাধ বৃহৎ নেতিবাচক মান আমার উত্তর

— S.Serpooshan

Answer 9

দুর্ভাগ্যক্রমে, এটি 2019 এবং white-space-collapse এখনও বাস্তবায়িত হয়নি।

এর মধ্যে, অভিভাবক উপাদান দিন font-size: 0;এবং font-sizeবাচ্চাদের উপর সেট করুন । এই কৌতুক করতে হবে

Answer 10

পুরানো ব্রাউজারগুলির জন্য ফ্লেক্সবক্স ব্যবহার করুন এবং একটি ফালব্যাক করুন (উপরের পরামর্শগুলি থেকে):

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Answer 11

সরল:

item {
  display: inline-block;
  margin-right: -0.25em;
}

পিতামাতার উপাদান স্পর্শ করার দরকার নেই।

কেবল এখানে শর্ত: আইটেমের ফন্ট-আকার সংজ্ঞায়িত করা উচিত নয় (অবশ্যই পিতামাতার ফন্ট-আকারের সমান হতে হবে)।

0.25em ডিফল্ট হয় word-spacing

ডাব্লু 3 স্কুল - শব্দ ব্যবধান সম্পত্তি

Comments

0.25 মিমটি "ডিফল্ট ওয়ার্ড-স্পেসিং" নয়, এটি টাইমস নিউ রোমান ফন্টের শ্বেতস্পেসের অক্ষরের প্রস্থ যা কিছু জনপ্রিয় ওএসে ডিফল্ট ফন্ট হিসাবে দেখা যায়। হেলভেটিকার মতো অন্যান্য জনপ্রিয় ফন্টগুলিতে প্রায়শই প্রশস্ত হোয়াইটস্পেসের চরিত্র থাকে, সুতরাং এগুলি থেকে কেবল 0.25 মিমি সরিয়ে ফেলা ফাঁক থেকে মুক্তি পেতে অপর্যাপ্ত হবে।

— ইলিয়া স্ট্রেলটসিন

Answer 12

ফন্ট-আকার: 0; পরিচালনা করতে কিছুটা জটিল হতে পারে ...

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

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

তারপরে আপনি এটি নিম্নলিখিত হিসাবে ব্যবহার করতে পারেন ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

আমি যতদূর জানি (আমি ভুল হতে পারি) তবে সমস্ত ব্রাউজার এই পদ্ধতিটিকে সমর্থন করে।

ব্যাখ্যা :

আপনি যেমনটি কাজ করবেন বলে ঠিক করেছিলেন ঠিক তেমন এটি কাজ করে (সম্ভবত -3px আরও ভাল হতে পারে)।

• আপনি কোডটি অনুলিপি করে আটকান (একবার)
• তারপরে আপনার এইচটিএমএলে কেবল class="items"প্রতিটি ইনলাইন-ব্লকের পিতামাতাকে ব্যবহার করুন।

আপনার নতুন ইনলাইন ব্লকগুলির জন্য আপনার আবার সিএসএসে ফিরে যাওয়ার দরকার নেই, এবং আর একটি সিএসএস বিধি যুক্ত করার দরকার নেই।

একবারে দুটি ইস্যু সমাধান করা।

এছাড়াও >(লক্ষণ অপেক্ষা বৃহত্তর) নোট করুন এর অর্থ হ'ল * / সমস্ত বাচ্চাদের ইনলাইন-ব্লক হওয়া উচিত।

http://jsfiddle.net/fD5u3/

দ্রষ্টব্য: যখন কোনও মোড়কটির সন্তানের মোড়ক থাকে তখন আমি চিঠি-ব্যবধানের উত্তরাধিকারী হওয়ার জন্য সংশোধন করেছি।

Comments

পরিবর্তে -4pxজন্য letter-spacingযা যথেষ্ট নয় বৃহৎ ফন্ট-মাপ জন্য হতে পারে এই বেহালার দেখুন: যেমন , আমরা একটি বৃহত্তর মান হিসেবে ব্যবহার করতে পারে আমার পোস্টে

— S.Serpooshan

Answer 13

যদিও, প্রযুক্তিগতভাবে প্রশ্নের উত্তর না: "আমি কীভাবে ইনলাইন-ব্লক উপাদানগুলির মধ্যে স্থানটি সরিয়ে ফেলব?"

আপনি ফ্লেক্সবক্স সমাধানটি চেষ্টা করতে পারেন এবং নীচের কোডটি প্রয়োগ করতে পারেন এবং স্থানটি সরানো হবে।

p {
   display: flex;
   flex-direction: row;
}

আপনি এই লিঙ্কটিতে এ সম্পর্কে আরও শিখতে পারেন: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

যদিও টেকনিক্যালি না "আমি ইনলাইন-ব্লক সঙ্গে এটা করতে পারেন" একটি উত্তর এই আমার মনে হচ্ছে একটি মার্জিত সমাধান হতে না ...

— লুকাস

Answer 14

আপনি কোনও ফাঁক ছাড়াই দুটি নীল স্প্যান তৈরি করতে চান বা অন্য সাদা স্থান পরিচালনা করতে চান কিনা তা আমি নিশ্চিত নই তবে আপনি যদি শূন্যস্থানটি সরাতে চান তবে:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

এবং সম্পন্ন।

Answer 15

সাধারণত আমরা বিভিন্ন লাইনে এর মতো উপাদান ব্যবহার করি, তবে display:inline-blockএকই লাইনে ট্যাগ ব্যবহারের ক্ষেত্রে স্থানটি সরিয়ে ফেলবে, তবে ভিন্ন লাইনে তা হবে না।

ভিন্ন লাইনে ট্যাগ সহ একটি উদাহরণ:

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

একই লাইনে ট্যাগ সহ উদাহরণ

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span><span> Bar </span>
</p>

---

আর একটি দক্ষ পদ্ধতি হ'ল একটি সিএসএস কাজ যা font-size:0পিতামাতার উপাদানগুলিতে ব্যবহার করে এবং font-sizeএকটি শিশু উপাদানকে যতটা চান তা দিতে দেয়।

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

উপরের পদ্ধতিগুলি পুরো প্রয়োগের উপর নির্ভর করে কোথাও নাও কাজ করতে পারে তবে শেষ পদ্ধতিটি এই পরিস্থিতির জন্য একটি বোকা সমাধান এবং যে কোনও জায়গায় ব্যবহার করা যেতে পারে।

Comments

এই পদ্ধতির একটি অসুবিধা হ'ল শিশু উপাদানগুলিতে এটিকে স্বাভাবিক অবস্থায় ফিরিয়ে আনতে আমাদের ডিফল্ট ফন্ট-আকার (উদাঃ 14px) জানতে এবং পুনরাবৃত্তি করা দরকার!

— S.Serpooshan

Answer 16

আমার এখনই এই সমস্যাটি ছিল এবং font-size:0;আমি খুঁজে পেয়েছি যে ইন্টারনেট এক্সপ্লোরার 7 এ সমস্যাটি এখনও রয়ে গেছে কারণ ইন্টারনেট এক্সপ্লোরার "ফন্ট সাইজ 0?!?! ডাব্লুটিএফ কি আপনি পাগল মানুষ?" - সুতরাং, আমার ক্ষেত্রে আমি এরিক মেয়ারের সিএসএস রিসেট করেছি এবং আমার সাথে font-size:0.01em;ইন্টারনেট এক্সপ্লোরার 7 থেকে ফায়ারফক্স 9-তে 1 পিক্সেলের পার্থক্য রয়েছে, সুতরাং, আমি মনে করি এটি সমাধান হতে পারে।

Answer 17

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}

<p>
  <span> hello </span>
  <span> world </span>
</p>

Comments

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

— আশীষ আহুজা

আমি অনুমান করি যে floatএবং এর display:inline-blockজন্য spanবোঝানো হয়েছিল কেসটির ক্ষেত্রে ফ্যালব্যাকস যদি flexসমর্থিত না হয় floatতবে কার্যকরভাবে এর প্রভাবটি বাতিল করে দেবে inline-block, সুতরাং পরবর্তীটি অপ্রয়োজনীয় বলে মনে হয়।

— ইলিয়া স্ট্রেলটসিন

Answer 18

আমি সম্প্রতি এটি মোকাবেলা করছি এবং পিতামাতাকে সেট করার পরিবর্তে font-size:0বাচ্চাকে আবার যুক্তিসঙ্গত মান হিসাবে সেট করার পরিবর্তে পিতা বা মাতা ধারক স্থির করে letter-spacing:-.25emতারপর সন্তানের কাছে ফিরে আসার দ্বারা আমি ধারাবাহিক ফলাফল পাচ্ছি letter-spacing:normal।

বিকল্প থ্রেডে আমি একজন কমেন্টার উল্লেখ দেখেছি যা font-size:0সর্বদা আদর্শ নয় কারণ লোকেরা তাদের ব্রাউজারগুলিতে ন্যূনতম ফন্টের আকারগুলি নিয়ন্ত্রণ করতে পারে, ফন্টের আকারকে শূন্যে সেট করার সম্ভাবনাটিকে সম্পূর্ণ উপেক্ষা করে।

ইএমএস ব্যবহার করা নির্দিষ্ট করা ফন্ট-আকার 100%, 15pt বা 36px নয় তা বিবেচনা করেই কাজ করে।

http://cdpn.io/dKIjo

Comments

অ্যান্ড্রয়েডের জন্য ফায়ারফক্সে, আমি বাক্সগুলির মধ্যে 1px স্থান দেখতে পাচ্ছি।

— Vidime Vidas

Answer 19

আমি মনে করি এটির জন্য খুব সহজ / পুরানো পদ্ধতি রয়েছে যা সমস্ত ব্রাউজার এমনকি IE 6/7 দ্বারা সমর্থিত। আমরা সহজেই letter-spacingপিতামাতার একটি বড় নেতিবাচক মান সেট করতে পারি এবং তারপরে এটি normalশিশু উপাদানগুলিতে আবার সেট করতে পারি :

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

Comments

এখানে একই ঘটনার জন্য আপনাকে letter-spacing:normalসমস্ত শিশু উপাদানকে সেট করতে হবে।

— গৌরব আগরওয়াল

@ গৌরব আগগরওয়াল তবে letter-spacingসময়ের হিসাবে 99.99% normal। হরফ আকারের একটি নির্দিষ্ট মান নেই এবং এটি ডিজাইনের উপর নির্ভর করে। এটি হ'ল ফন্ট-পরিবার এবং অন্যান্য বিষয়ের উপর ভিত্তি করে একটি ছোট মান বা বৃহত্তর মূল্য হতে পারে ... আমি কোনও বিশেষ মান (০ / সাধারণ ব্যতীত) এর জন্য দেখতে / ব্যবহার করতে আমার জীবনে কখনও মনে করতে পারি না letter-spacing, তাই আমি মনে করি এটি নিরাপদ এবং আরও ভাল

— চয়েস

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

— গৌরব আগরওয়াল

"" আপনি কী বলতে চাইছেন তা আমি বুঝতে পারি না এবং হরফ আকারের ব্যবহার খুব বেশি প্রয়োজন (যদি প্রয়োজন হয়) আপনার ডাবল কোড লেখার ক্ষেত্রে মোটেই কার্যকর নয় যেখানে আপনার ফন্টের আকার পরিবর্তন করতে হবে "" আমার পোস্টে, কোনও ফন্ট-আকারের সেটিং নেই! আমি যা করেছি তা হ'ল লেটার-স্পেসিং যা সাধারণত কেউ তার সিএসএসে সেট করে না (এটি সর্বদা স্বাভাবিক)। উত্তর আমরা ফন্টের আকার পরিবর্তন করবেন না তা আমরা জানি মূল ফন্ট সাইজ এটি ফিরিয়ে সেট প্রয়োজন হবে না

— S.Serpooshan

আমি মনে করি এই পদ্ধতিটি আগে জনপ্রিয় হয়ে উঠেনি কারণ এটি অপেরা / প্রেস্টোতে কাজ করে না। এবং বর্তমানে আমাদের কাছে অন্যান্য বিকল্প রয়েছে যা এ জাতীয় workarouns প্রয়োজন নেই, যেমন ইনলাইন-ব্লকের পরিবর্তে ফ্লেক্সবক্স ব্যবহার।

— ইলিয়া স্ট্রেলটসিন

Answer 20

এই প্রশ্নের সহজ উত্তর হ'ল যুক্ত করা।

CSS

float: left;

কোডপেন লিংক: http://jsfiddle.net/dGHFV/3560/

Answer 21

পিএইচপি বন্ধনী সহ:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Answer 22

আমি ব্যবহারকারী 55609829 এর উত্তরটি কিছুটা প্রসারিত করতে যাচ্ছি কারণ আমি বিশ্বাস করি যে এখানে অন্যান্য সমাধানগুলি খুব জটিল / খুব বেশি কাজ। margin-right: -4pxইনলাইন ব্লক উপাদানগুলিতে একটি প্রয়োগ করা শূন্যস্থান সরিয়ে ফেলবে এবং সমস্ত ব্রাউজার দ্বারা সমর্থিত। আপডেট হওয়া ফিডালটি এখানে দেখুন । নেতিবাচক মার্জিন ব্যবহার সঙ্গে সংশ্লিষ্ট তাদের জন্য, দান চেষ্টা এই একটি পঠিত।

Comments

যদি ব্যবহারকারী তার ব্রাউজারের ডিফল্ট ফন্ট-আকার পরিবর্তন করে তবে এটি কাজ করবে না। আরও ভাল ব্যবহার -0.25m।

— মার্টিন স্নাইডার

Answer 23

সিএসএস লেখা মডিউল শ্রেনী 4 স্পেসিফিকেশন সংজ্ঞায়িত করে তা একটাtext-space-collapse সম্পত্তি, কীভাবে সাদা স্থান ভেতরে ও আশেপাশে একটি উপাদান প্রক্রিয়াকৃত হয় নিয়ন্ত্রণ করার অনুমতি দেয়।

সুতরাং, আপনার উদাহরণ সম্পর্কিত, আপনাকে কেবল এটি লিখতে হবে:

p {
  text-space-collapse: discard;
}

দুর্ভাগ্যক্রমে, কোনও ব্রাউজার এই সম্পত্তিটি এখনও বাস্তবায়ন করছে না (সেপ্টেম্বর ২০১ 2016 হিসাবে) এইচবিপির উত্তরের মন্তব্যে উল্লিখিত হয়েছে ।

Answer 24

আমি একটি খাঁটি সিএসএস সমাধান পেয়েছি যা আমার জন্য সমস্ত ব্রাউজারে খুব ভালভাবে কাজ করেছে:

span {
    display: table-cell;
}

Comments

এই প্রশ্নটি ইনলাইন-ব্লক সম্পর্কে।

— মদন ভান্ডারী

@ মদনভাণ্ডারী সঠিক তবে এটি সমস্ত নোংরা হ্যাকের প্রয়োজনীয়তা অপসারণ বলে মনে হচ্ছে।

— ডেভিড

Answer 25

যোগ white-space: nowrapধারক উপাদানে:

সিএসএস:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

এইচটিএমএল:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

এখানে Plunker ।

Comments

ভাসা ব্যতীত কাজ করে না - যা আপনার প্লামকারে অনুপস্থিত। সুতরাং "হোয়াইট-স্পেস: নওর্যাপ" কখনই কার্যকরী উত্তর বলে মনে হয় না।

— ডেভিড

Answer 26

মত সমাধান প্রচুর আছে font-size:0, word-spacing, margin-left, letter-spacingইত্যাদি।

সাধারণত আমি letter-spacingকারণ ব্যবহার পছন্দ

1. অতিরিক্ত স্থানের প্রস্থের (যেমন উদ্যানের চেয়ে বড়) একটি মান নির্ধারণ করার পরে এটি ঠিক আছে -1em ) ।
2. যাইহোক, এটি ঠিক হবে না word-spacingএবং margin-leftযখন আমরা আরও বড় মান সেট করি-1em ।
3. font-sizeযখন আমরা ইউনিট emহিসাবে ব্যবহার করার চেষ্টা করি তখন ব্যবহার করা সুবিধাজনক নয় font-size।

সুতরাং, letter-spacing সেরা পছন্দ বলে মনে হচ্ছে।

যাইহোক, আমি আপনাকে সতর্ক করতে হবে

যখন আপনি ব্যবহার letter-spacingআপনার ব্যবহার করা ভাল ছিল -0.3emবা -0.31emনা অন্যদের।

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

আপনি যদি ক্রোম (পরীক্ষার সংস্করণ 66.0.3359.139) বা অপেরা (পরীক্ষার সংস্করণ 53.0.2907.99) ব্যবহার করছেন তবে আপনি যা দেখছেন তা হতে পারে:

আপনি যদি ফায়ারফক্স (.0০.০.২), আইই ১০ বা এজ ব্যবহার করছেন তবে যা দেখছেন তা হতে পারে:

এটা আকর্ষণীয়. সুতরাং, আমি এমডএন-লেটার-স্পেসিংটি যাচাই করেছিলাম এবং এটি পেয়েছি:

লম্বা

অক্ষরের মধ্যে ডিফল্ট স্থান ছাড়াও অতিরিক্ত আন্তর-অক্ষর স্থান নির্দিষ্ট করে। মানগুলি নেতিবাচক হতে পারে, তবে বাস্তবায়ন-সীমাবদ্ধ থাকতে পারে। ব্যবহারকারী এজেন্টগুলি পাঠ্যের ন্যায্যতা প্রমাণের জন্য আন্তঃ-চরিত্রের স্থানটি বাড়িয়ে বা হ্রাস করতে পারে না।

মনে হয় এটিই কারণ।

Answer 27

যোগ letter-spacing:-4px;পিতা বা মাতা উপর pCSS এবং যোগ letter-spacing:0px;আপনার টু spanCSS।

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Answer 28

আমি ভেবেছিলাম আমি এই প্রশ্নে নতুন কিছু যুক্ত করব যদিও বর্তমানে সরবরাহ করা অনেকগুলি উত্তর পর্যাপ্ত ও প্রাসঙ্গিকের চেয়ে বেশি, কিছু নতুন সিএসএস বৈশিষ্ট্য রয়েছে যা সমস্ত ব্রাউজারগুলিতে সম্পূর্ণ সমর্থন সহ খুব পরিষ্কার আউটপুট অর্জন করতে পারে এবং সামান্য কোন 'হ্যাক'। এটি এ থেকে সরে যায় inline-blockতবে এটি আপনাকে জিজ্ঞাসা হিসাবে একই ফলাফল দেয়।

এই সিএসএস বৈশিষ্ট্য হয় grid

সিএসএস গ্রিড IE ছাড়াও অত্যন্ত সমর্থিত ( CanIUse ), যা কেবল -ms-এটির কাজ করার জন্য একটি উপসর্গের প্রয়োজন ।

সিএসএস গ্রিড এছাড়াও অত্যন্ত নমনীয়, এবং থেকে সমস্ত ভাল অংশের লাগে table, flexএবংinline-block উপাদান এবং তাদের এক স্থানে নিয়ে আসে।

একটি তৈরি করার সময় gridআপনি সারি এবং কলামগুলির মধ্যে ফাঁকগুলি নির্দিষ্ট করতে পারেন। ডিফল্ট ফাঁকটি ইতিমধ্যে সেট করা আছে 0pxতবে আপনি এই মানটি আপনার পছন্দমতো পরিবর্তন করতে পারেন।

এটিকে কিছুটা ছোট করার জন্য, এটি সম্পর্কিত কাজের উদাহরণ:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}

<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

Comments

কোনও display:gridউপাদানের বিষয়বস্তু অবরুদ্ধ করার জন্য কেবল মন্তব্য করা , তাই এটি এতটা প্রদর্শন নয়: গ্রিড আপনাকে ইনলাইন-ব্লক লেআউটগুলির সাথে কাজ করতে সহায়তা করে, বরং এটি আপনাকে inline-blockএমন কিছু দিয়ে কাজ করার বদলে দেয় যেখানে আপনি 'গটার' নিয়ন্ত্রণ করতে পারেন এই প্রশ্ন করতে চায়। এছাড়াও, আমি সত্যিই আশ্চর্য হয়েছি যে এর আগে কোনও সিএসএস গ্রিড লেআউট সমাধান নিয়ে এখনও কেউ সাড়া দেয়নি।

— টাইলারহ

এটি পরিষ্কার করে দেবে এটি থেকে আসা একটি পরিবর্তন inline-block। এবং হ্যাঁ, আমিও আশ্চর্য হয়েছি, অনুমান করুন gridযে অভিজ্ঞতার সাথে কেউই এর আগে আসলে আসেনি। এটি কিছুটা ঘুরেফিরে খেলছেন এবং এই প্রশ্নটি এসেছিলেন তাই ভেবেছিলেন কেন: পি

— স্টিওয়ার্টসাইড

Answer 29

আর একটি উপায় আমি খুঁজে পেয়েছি হ'ল সারিটির প্রথম উপাদান ব্যতীত মার্জিন-বামকে নেতিবাচক মান হিসাবে প্রয়োগ করা।

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

Answer 30

প্রতিটি প্রশ্ন, যে মধ্যে স্থান মুছে ফেলার জন্য চেষ্টা inline-blockকরা একটি মত মনে হয় <table>আমার কাছে ...

এরকম কিছু চেষ্টা করুন:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>