কেবলমাত্র CSS ব্যবহার করে এইচটিএমএল উপাদানগুলির মধ্যে স্থান যুক্ত করুন

Question

আমার একের পর এক বেশ কয়েকটি এইচটিএমএল উপাদান রয়েছে:

<span>1</span>
<span>2</span>
<span>3</span>

আমি কেবল সিএসএস ব্যবহার করে উপাদানগুলির নিচে স্থান যুক্ত করার সর্বোত্তম উপায়টি সন্ধান করছি

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

অতিরিক্তভাবে:

• আপনার প্রাপ্তিগুলির ব্রাউজারের সামঞ্জস্যতা লিখুন

---

হালনাগাদ

দেখে মনে হচ্ছে আমি অস্পষ্ট ছিলাম। আমি পছন্দ মতো কোনও অতিরিক্ত এইচটিএমএল মার্কআপ ব্যবহার করতে চাই না

<span></span>  <span></span>  <span class="last_span"></span>

আমি টেবিল ব্যবহার করতে চাই না

আমি চাই যে প্রথম এবং শেষ স্প্যানটি সিএসএস দ্বারা স্বয়ংক্রিয়ভাবে লক্ষ্যবস্তু হয়

আমি জাভাস্ক্রিপ্ট ব্যবহার করতে চাই না

Requirementচ্ছিক প্রয়োজনীয়তা: শেষ স্প্যানটি প্যারেড ট্যাগের সর্বশেষ শিশু হতে পারে না, তবে এটি প্যারেন্ট ট্যাগের সর্বশেষ স্প্যান হবে। স্প্যানদের মধ্যে তাদের মধ্যে অন্য কোনও ট্যাগ নেই।

Comments

সম্ভবত আপনি একটি টেবিল ব্যবহার বিবেচনা করা উচিত। ডেটাতে কী তথ্য যায় তার উপর নির্ভর করেtext

— মাদারার ঘোস্ট

spanS এর সংখ্যা কি পরিবর্তনশীল?

— থার্ডডট

@ ট্রুথের সর্বশেষ রিসর্টটি সারণী হওয়া উচিত।

— টিম জয়েস

spanউপাদান ওয়েব পরিষেবা আমি অ্যাক্সেস না দ্বারা তৈরি হয়। সুতরাং আমি মার্কআপ পরিবর্তন করতে পারি না। তবে আমি সিএসএস

— ড্যান

এই জাতীয় প্রশ্নের সাহায্যে আপনার সর্বদা আপনার প্রয়োজনীয় ব্রাউজার সমর্থনটি নির্দিষ্ট করা উচিত। "আমি আইই 7 সমর্থন প্রয়োজন" "আমি কেবল ক্রোম ব্যবহার করছি" এর সম্পূর্ণ ভিন্ন উত্তর পাবে।

— ত্রিশডট

Answer 1

এটি করার একটি ভাল উপায় হ'ল:

span + span {
    margin-left: 10px;
}

spanএকটি দ্বারা পূর্ববর্তী প্রতিটি span(সুতরাং, spanপ্রথম ব্যতীত প্রত্যেকটি ) থাকবে margin-left: 10px।

অনুরূপ প্রশ্নের আরও বিশদ উত্তর এখানে : হ্যাক ছাড়াই উপাদানগুলির মধ্যে পৃথককারী

Comments

এটি একটি দুর্দান্ত সমাধান, যদিও আপনার ধারকটি একাধিক লাইনে বিস্তৃত হবে যদি তা ব্যর্থ হয়।

— সাভাস বেদোভা

এটি ক্লাসগুলির .sidebar-img + .sidebar-text { margin-left: 40px; }

— সাথেও এইভাবে

আইটেমগুলি পরবর্তী লাইনে আবদ্ধ হলে আপনি কীভাবে পরিচালনা করবেন?

— thdoan

@thdoan: এটা আপনার লেআউট, ইত্যাদি আপনি ভালো কিছু করার চেষ্টা করতে পারেন উপর নির্ভর করে এই ।

— ত্রিশডট

আমি গ্রিড এবং গ্রিড-ফাঁক ব্যবহার করে রেডডটোরিকের সমাধানটি পছন্দ করি।

— অ্যালেক্স

Answer 2

শুধু মার্জিন বা প্যাডিং ব্যবহার করুন।

আপনার নির্দিষ্ট ক্ষেত্রে, আপনি margin:0 10pxকেবল ২ য় তারিখে ব্যবহার করতে পারেন <span>।

হালনাগাদ

এখানে একটি দুর্দান্ত সিএসএস 3 সমাধান ( জেএসফিডাল ):

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

নির্বাচকরা ব্যবহার উন্নত উপাদান নির্বাচন চাই :nth-child(), :last-child, :first-of-type, ইত্যাদি ইন্টারনেট এক্সপ্লোরার 9 থেকে সমর্থিত।

Comments

আপনার কাছে দুর্দান্ত উত্তর রয়েছে, সিমোন, তবে আপনি দয়া করে শেষটি spanনিজেই নির্দিষ্ট করে না দিয়ে প্রশ্নটি সমাধান করতে পারেন ? এটি CSS এর কাজ হওয়া উচিত

— ড্যান

এটি একটি বিনা বিহীন হ্যাক, এটি "ওয়ার্ড স্পেসিং" সম্পত্তি: w3schools.com/cssref/pr_text_word-spacing.asp বেনের উত্তরটি দেখুন

— arieljuod

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

— arieljuod

আসলে, ওপি জানিয়েছে যে সে spanগুলি এবং divগুলি ব্যবহার করবে (যা ব্লক উপাদানসমূহ)। আপনি যদি divইনলাইন উপাদান হিসাবে সংজ্ঞায়িত করেন তবে আপনার সমাধানটি কার্যকর হয় ...

— সিমোন

Answer 3

অভিভাবক পাত্রে এই নিয়মগুলি যুক্ত করুন:

display: grid
grid-auto-flow: column
grid-column-gap: 10px

ভাল রেফারেন্স: https://cssreferences.io/

ব্রাউজারের সামঞ্জস্যতা: https://gridbyexample.com/browsers/

Comments

grid-auto-columns="max-content"এছাড়াও দরকারী হতে পারে। এটি গ্রিড আইটেমের আকারটি সামগ্রীর সাথে মিলিয়ে দেবে। এছাড়াও, ব্রাউজারের সামঞ্জস্যতা আর কোনও সমস্যা হওয়া উচিত নয়: caniuse.com/#feat=css-grid

— অ্যালেক্স

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আমি জানি মন্তব্যগুলি ধন্যবাদ দেওয়ার জন্য নয়, আমি এখন অবধি কেবল 'ফ্লেক্স' প্রদর্শনটি ব্যবহার করছিলাম এবং এই 'গ্রিড' জিনিসটি পিতামাতার ধারক থেকেই এটিকে এত সহজ করে তুলেছে! এটি সম্পূর্ণরূপে অকেজো না রাখার জন্য, নিম্নলিখিত রেফারেন্সটি যুক্ত করবে যা আরও বেশি কিছু জানতে চাইলে অনেকের পক্ষে সহায়তা করে: css-tricks.com/snippets/css/complete-guide-grid

— রোহান কুমার

Answer 4

আপনি যে spanকোনও ইনলাইন উপাদান এটি ব্যবহার করতে পারেন

span{
     word-spacing:10px;
}

তবে আপনার স্প্যানে যদি আপনার একাধিক পাঠ্যের শব্দ থাকে তবে এই সমাধানটি ভেঙে যাবে

Answer 5

আপনি কোডের এক লাইনেই প্রথমটিকে বাদ দিয়ে উপাদানগুলি স্টাইল করতে পারেন:

span ~ span {
    padding-left: 10px;
}

কোনও ক্লাস পরিবর্তন করার দরকার নেই।

Comments

এই এক পারফেক্ট কাজ করে। স্প্যান + স্প্যান কাজ করে না তবে স্প্যান ~ স্প্যানটি কবজির মতো কাজ করে! ধন্যবাদ

— জুলিয়াস্ম

আমার ক্ষেত্রে, আমার বেশ কয়েকটি স্প্যান রয়েছে, যার মধ্যে কিছুতে "দেখানো" ক্লাসটি নাও থাকতে পারে, তবে আমার যা প্রয়োজন তার span.Showing ~ span.Showingপরিবর্তে span.Showing + span.Showing। ~সাধারণ ভাইবিলিং নির্বাচক, যেখানে একজনকে অন্য একজনকে সরাসরি অনুসরণ করার দরকার হয় না।

— এরিক

Answer 6

span:not(:last-child) {
    margin-right: 10px;
}

Answer 7

আপনি এটি লিখতে পারেন:

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}

Answer 8

<span>একটি অন্তর্নিহিত উপাদান তাই আপনি এটিকে ব্লক স্তর তৈরি না করেই এগুলিতে ফাঁক তৈরি করতে পারবেন না। এটা চেষ্টা কর

অনুভূমিক

span{
    margin-right: 10px;
    float: left;
}

উল্লম্ব

span{
    margin-bottom: 10px;
}

সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ।

Answer 9

আপনার উপাদানগুলি একটি ধারকের ভিতরে আবৃত করা উচিত, তারপরে সিএসএস গ্রিড , ফ্রি কোর্সের মতো নতুন CSS3 বৈশিষ্ট্য ব্যবহার করুন এবং তারপরে grid-gap:valueআপনার নির্দিষ্ট সমস্যার জন্য তৈরি করা উচিত

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

Comments

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

— এলিয়াস এস্ট্যাটাস্টিকসইউ

Answer 10

অথবা, মার্জিন সেট করার পরিবর্তে এবং এটিকে ওভাররাইড না করে, আপনি কেবল ঠিক নীচের কম্বো দিয়ে ঠিক এটি সেট করতে পারেন:

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}

Comments

উত্তম উত্তর, সীমাবদ্ধতা হ'ল ব্রাউজার সমর্থন :first-of-typeএবং :last-of-typeসিএসএস নির্বাচক।

— ড্যান

... এছাড়াও notএক্সপ্রেশন ব্রাউজার সমর্থন পরীক্ষা করুন

— ড্যান

@ ড্যান এটি আসলে দুর্দান্ত, শেষ কয়েক বছরের সমস্ত ব্রাউজারগুলি covered াকা থাকে । তবে আমি অবশ্যই স্বীকার করতে পারি যে, ইযোজার সমাধানটি আরও স্মার্ট :)

— জালোক

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

— মীর

Answer 11

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

Answer 12

আপনি যদি বিভিন্ন আইটেম সারিবদ্ধ করতে চান এবং আপনার চারদিকে চারদিকে একই মার্জিন থাকতে চান তবে আপনি নীচেরটি ব্যবহার করতে পারেন। প্রতিটি উপাদান সহ container, নির্বিশেষে, একই পার্শ্ববর্তী মার্জিনটি পাবে।

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

আপনি যদি সারিতে আইটেমগুলি সারিবদ্ধ করতে চান তবে প্রথম উপাদানটির বাম দিকের প্রান্তটি স্পর্শ করতে containerএবং অন্য সমস্ত উপাদানকে সমানভাবে ব্যবধানে রাখতে চান তবে আপনি এটি ব্যবহার করতে পারেন:

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}

Comments

এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এই কোডটির প্রশ্নের উত্তর কীভাবে তার দীর্ঘমেয়াদী মানকে উন্নত করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করে।

— εηοιτ.εηοιτ.βε